playbook_ui 12.24.0 → 12.25.0.pre.alpha.PLAY818multilevelrebuild770

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f27b3e255fc8158201600b6221f2091e84ceb753c83d6d28a045ca256729ec05
-  data.tar.gz: d2af8d464afa9225d3a3647dc83c2a241f208849978b39312d49f45b74415937
+  metadata.gz: a14e04b7668b97b0c9146aef7fa0b026c7a3aa5b1bacf8db93cdc415d75700b0
+  data.tar.gz: 54081e0902eca2e7cae249bbb4ec1b42d2a5d58aacb087de751ff559013c7571
 SHA512:
-  metadata.gz: '018df9baaa8a9b1bc628873a71a2c1a5dde29e228be173511078a8f934cab375c7992f7bdd1b8e50523d401bd3554fb5f491f2fe98daf811c27e88c5ed6534a4'
-  data.tar.gz: 30cf511832a2ce5021ed6658e76f89c5ecacd040538b67e169e41071eb6451969cc8e0fe71a6855e8a413ae1465837fd122ba26baa07a49788031c21e2c00744
+  metadata.gz: f8fe51a30d83dcff3111b4cebccdb4ca8e7202a9fea95d5ef3fe7352d7de1e93d14918ff324184d3f22c71d4b68888d826b1c228e77b221ca503bdebbc8549f4
+  data.tar.gz: a7d5e2f0f0e9ff53eda81f92d6236539e4e752b87d7bfdbe2c3edf2257590e99d7827857a85c521bae2e858a0e8a366cab0fffb78a16165852c7ce5f44bb4ec6

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_swift.md

@@ -1 +1,82 @@
-![image for avatar](https://images.unsplash.com/photo-1684237276530-a562fa8338b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=580&q=80)
+In the world of design, consistency is key. Whether you're designing a website, app, or product, having a consistent visual language can make all the difference. That's where design systems come in.
+
+A design system is a collection of reusable components, guidelines, and assets that help ensure consistency across all of your design work. It's a way to standardize your design language, making it easier for your team to work together and for your users to navigate your products.
+
+In this article, we'll explore the various elements of a design system and how they can be used to create a cohesive and effective design language.
+
+### Headings
+Headings are an essential component of any design system. They help organize content, provide visual hierarchy, and make it easier for users to scan and find what they're looking for. A good design system will have headings of various sizes, ranging from H1 (the largest) to H6 (the smallest). Here's an example:
+
+# H1: Main Title Headings
+## H2: Headings
+### H3: Subheadings
+#### H4: Sub-Subheadings
+
+![image for avatar](https://images.unsplash.com/photo-1684237276530-a562fa8338b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=580&q=80)
+
+### Lists
+Lists are another important component of a design system. They help organize content into easily digestible chunks, making it easier for users to read and understand. There are two types of lists: ordered and unordered.
+
+Ordered lists are numbered, and each item is listed in a specific order. For example:
+
+1. Headings
+2. Lists
+3. Blockquotes
+4. Links
+5. Bold
+6. Underline
+7. Code Blocks
+8. Inline Code
+9. Example Tables
+10. Horizontal Rules
+
+Unordered lists, on the other hand, use bullet points to separate each item. For example:
+
+* Headings
+* Lists
+* Blockquotes
+* Links
+* Bold
+* Underline
+* Code Blocks
+* Inline Code
+* Example Tables
+* Horizontal Rules
+
+### Blockquotes
+Blockquotes are used to highlight a particular section of text or quote. They’re often used to emphasize an important point or to provide context. Here’s an example:
+
+> “Design systems are a collection of reusable components, guidelines, and assets that help ensure consistency across all of your design work.” - ChatGPT
+
+
+### Links
+Links are an important part of any design system. They allow users to navigate between different pages and sections of your product. When using links in your design system, it’s important to make sure they’re consistent in color, size, and style. Here’s an example:
+Click here to learn more about design systems.
+
+### Bold, Underline, & Italics
+**Bold** and _underline_ are used to *highlight specific words* or phrases within ~~a block of~~ text. They help draw the user’s attention to important information. Here’s an example: *Design systems are* a collection of **reusable components**, **guidelines**, and **assets** that help ensure _consistency across all of your design work_.
+
+### Code Blocks and Inline Code
+Code blocks and `inline code` are used to display and highlight code within a block of text. This is especially useful for developers who need to reference code snippets in their work. 
+
+Here’s an example:
+
+```js
+function greet() {
+	console.log(“Hello, world!”);
+}
+```
+
+### Example Tables
+Example tables are used to display data in a clear and organized way. They help users compare and analyze information quickly. Here’s an example:
+
+| Tables   |      Are      |  Cool |
+|----------|:-------------:|------:|
+| col 1 is |  left-aligned | $1600 |
+| col 2 is |    centered   |   $12 |
+| col 3 is | right-aligned |    $1 |
+
+---
+
+### Horizontal Rules
+Horizontal rules are used to separate sections of content visually. They help break up long blocks of text and make it easier for users

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -19,6 +19,7 @@ type PbDateProps = {
   showDayOfWeek?: boolean;
   showIcon?: boolean;
   size?: "sm" | "md" | "lg";
+  unstyled?: boolean;
   value: string | Date;
 };
 
@@ -32,6 +33,7 @@ const PbDate = (props: PbDateProps) => {
     showDayOfWeek = false,
     showIcon = false,
     size = "md",
+    unstyled = false,
     value,
   } = props;
 
@@ -52,48 +54,100 @@ const PbDate = (props: PbDateProps) => {
   );
 
   return (
-    <div {...ariaProps} {...dataProps} className={classes} id={id}>
-      {size == "md" || size == "lg" ? (
-        <Title size={4} tag="h4">
-          {showIcon && (
-            <Body className="pb_icon_kit_container" color="light" tag="span">
-              <Icon fixedWidth icon="calendar-alt" />
-            </Body>
-          )}
-
-          {showDayOfWeek && (
-            <>
-              {weekday}
-              <Body color="light" tag="span" text=" • " />
-            </>
-          )}
-
-          <span>
-            {month} {day}
-          </span>
-          {currentYear != year && <span>{`, ${year}`}</span>}
-        </Title>
-      ) : (
-        <>
-          {showIcon && (
-            <Caption className="pb_icon_kit_container" tag="span">
-              <Icon fixedWidth icon="calendar-alt" size="sm" />
-            </Caption>
-          )}
-
-          {showDayOfWeek && (
-            <>
-              <Caption tag="div">{weekday}</Caption>
-              <Caption color="light" tag="div" text=" • " />
-            </>
-          )}
-
-          <Caption tag="span">
-            {month} {day}
-            {currentYear != year && <>{`, ${year}`}</>}
-          </Caption>
-        </>
-      )}
+    <div {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {unstyled
+        ? <>
+            {showIcon && (
+              <div>
+                <Icon fixedWidth
+                    icon="calendar-alt"
+                />
+              </div>
+            )}
+
+            {showDayOfWeek && (
+              <>
+                <div>
+                  {weekday}
+                </div>
+
+                <div>{"•"}</div>
+              </>
+            )}
+
+            <span>
+              <span>
+                {month} {day}
+              </span>
+
+              {currentYear != year && <span>{`, ${year}`}</span>}
+            </span>
+          </>
+        : size == "md" || size == "lg"
+          ? (
+            <Title size={4}
+                tag="h4"
+            >
+              {showIcon && (
+                <Body className="pb_icon_kit_container"
+                    color="light"
+                    tag="span"
+                >
+                  <Icon fixedWidth
+                      icon="calendar-alt"
+                  />
+                </Body>
+              )}
+
+              {showDayOfWeek && (
+                <>
+                  {weekday}
+                  <Body color="light"
+                      tag="span"
+                      text=" • "
+                  />
+                </>
+              )}
+
+              <span>
+                {month} {day}
+              </span>
+              {currentYear != year && <span>{`, ${year}`}</span>}
+            </Title>
+            )
+          : (
+              <>
+                {showIcon && (
+                  <Caption className="pb_icon_kit_container"
+                      tag="span"
+                  >
+                    <Icon fixedWidth
+                        icon="calendar-alt"
+                        size="sm"
+                    />
+                  </Caption>
+                )}
+
+                {showDayOfWeek && (
+                  <>
+                    <Caption tag="div">{weekday}</Caption>
+                    <Caption color="light"
+                        tag="div"
+                        text=" • "
+                    />
+                  </>
+                )}
+
+                <Caption tag="span">
+                  {month} {day}
+                  {currentYear != year && <>{`, ${year}`}</>}
+                </Caption>
+              </>
+            )}
     </div>
   );
 };

data/app/pb_kits/playbook/pb_date/date.html.erb

@@ -4,7 +4,28 @@
     class: object.classname,
     aria: object.aria) do %>
 
-  <% if object.size == "md" %>
+  <% if object.unstyled %>
+    <!-- icon -->
+    <% if object.show_icon %>
+      <div><%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %></div>
+    <% end %>
+
+    <!-- day_of_week -->
+    <% if object.show_day_of_week %>
+      <div><%= object.day_of_week %></div>
+      <div>•</div>
+    <% end %>
+
+    <!-- month day, year -->
+    <%# if not current year %>
+    <% if object.year.to_s == DateTime.now.year.to_s %>
+      <span><%= "#{object.month} #{object.day}" %></span>
+    <%# if is current year %>
+    <% else %>
+      <span><%= "#{object.month} #{object.day}, #{object.year}" %></span>
+    <% end %>
+
+  <% elsif object.size == "md" || object.size == "lg" %>
     <!-- icon -->
     <% if object.show_icon %>
       <%= pb_rails("body", props: {
@@ -36,7 +57,6 @@
     <% end %>
 
   <% else %>
-
     <!-- icon -->
     <% if object.show_icon %>
       <%= pb_rails("caption", props: {

data/app/pb_kits/playbook/pb_date/date.rb

@@ -15,6 +15,8 @@ module Playbook
                   values: %w[lg md sm xs],
                   default: "md"
       prop :timezone, default: "America/New_York"
+      prop :unstyled, type: Playbook::Props::Boolean,
+                      default: false
 
       def classname
         generate_classname("pb_date_kit", alignment)

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("caption", props: { size: "xs", text: "Example with no year" }) %>
+
+<%= pb_rails("date", props: {
+  date: Date.today,
+  unstyled: true
+}) %>
+
+<br />
+
+<%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>
+
+<%= pb_rails("title", props: { size: 1 }) do %>
+  <%= pb_rails("date", props: {
+    date: "2012-08-02T15:49:29Z",
+    unstyled: true
+  }) %>
+<% end %>
+
+<br />
+
+<%= pb_rails("caption", props: { size: "xs", text: "Example with icon + subcaption" }) %>
+
+<%= pb_rails("caption", props: { size: "xs" }) do %>
+  <%= pb_rails("date", props: {
+    date: "2012-08-02T15:49:29Z",
+    show_icon: true,
+    unstyled: true,
+    show_day_of_week: true
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Caption, Date as FormattedDate, Title } from '../../'
+
+const DateUnstyled = (props) => {
+  return (
+    <>
+      <Caption size="xs"
+          text="Basic unstyled example"
+      />
+      <FormattedDate
+          unstyled
+          value={new Date()}
+          {...props}
+      />
+
+      <br />
+
+      <Caption size="xs"
+          text="Example with wrapping typography kit"
+      />
+      <Title size={1}>
+        <FormattedDate
+            unstyled
+            value="1995-12-25"
+            {...props}
+        />
+      </Title>
+
+      <br />
+
+      <Caption size="xs"
+          text="Example with icon + subcaption"
+      />
+      <Caption size="xs">
+        <FormattedDate
+            showDayOfWeek
+            showIcon
+            unstyled
+            value="1995-12-25"
+            {...props}
+        />
+      </Caption>
+    </>
+  )
+}
+
+export default DateUnstyled

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.md

@@ -0,0 +1 @@
+For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Date` kit and wrap it in any of our typography kits (`Title`, `Body`, `Caption`, etc.). This will allow the `Date` kit to inherit any of our typography styles.

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

@@ -1,14 +1,14 @@
 examples:
-  
+
   rails:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
   - date_timezone: Timezones
-  
-  
+  - date_unstyled: Unstyled
+
   react:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
-  
+  - date_unstyled: Unstyled

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

@@ -1,3 +1,4 @@
 export { default as DateDefault } from './_date_default.jsx'
 export { default as DateVariants } from './_date_variants.jsx'
 export { default as DateAlignment } from './_date_alignment.jsx'
+export { default as DateUnstyled } from './_date_unstyled.jsx'

data/app/pb_kits/playbook/pb_docs/kit_example.html.erb

@@ -1,20 +1,21 @@
 <% example_html = ERB.new(example).result %>
 
 <%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
-  <div class="pb--kit-example">
-    <%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
-    <br />
-    <%= example %>
-    <br>
-  </div>
-  
-  <% if (action_name == "kit_show_swift") %>
-    <div class="pb--kit-example-markdown pt_none <%= dark ? "dark" : "" %>">
+  <% unless (action_name == "kit_show_swift") %>
+    <div class="pb--kit-example">
+      <%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
+      <br />
+      <%= example %>
+      <br>
+    </div>
+  <% else %>
+    <div class="pb--kit-example-markdown pt_none markdown <%= dark ? "dark" : "" %>">
+      <%= pb_rails("caption", props: { text: example_title, dark: dark, margin_top: "md" }) %>
       <%= render_markdown(description) %>
     </div>
   <% end %>
   <% if show_code %>
-    <div class="markdown pb--kit-example-markdown <%= dark ? "dark" : "" %>">
+    <div class="markdown pb--kit-example-markdown markdown <%= dark ? "dark" : "" %>">
       <%= render_markdown(description) %>
     </div>
     <div id="code-wrapper">
@@ -32,10 +33,10 @@
       </div>
       <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
         <%= pb_rails("section_separator", props: { dark: dark })%>
-        <a href="#" style="padding: 16px 0px 22px 0px;" id="copy-code-<%= example_key %>" class="pb--copy-code" onclick="copyOnClick(`<%= source %>`, `copy-code-<%= example_key %>`)">
-          <%= pb_rails("button", props: { id: "copy-button-#{example_key}", text: "Copy Code", size: "sm", icon: "copy" }) %>
+        <a href="#" id="copy-code-<%= example_key %>" class="pb--copy-code" onclick="copyOnClick(`<%= source %>`, `copy-code-<%= example_key %>`)">
+          <%= pb_rails("button", props: { id: "copy-button-#{example_key}", text: "Copy Code", size: "sm", icon: "copy", padding_x: "xs" }) %>
         </a>
-        <pre class="highlight"><%= raw rouge(source, highlighter) %></pre>
+        <pre class="highlight"><%= raw render_code(source, highlighter) %></pre>
       </div>
         <%= pb_rails("popover", props: {
           trigger_element_id: "copy-button-#{example_key}",

data/app/pb_kits/playbook/pb_docs/kit_example.rb

@@ -5,8 +5,6 @@
 module Playbook
   module PbDocs
     class KitExample < Playbook::KitBase
-      include Playbook::Markdown::Helper
-
       prop :kit, type: Playbook::Props::String, required: true
       prop :example_title, type: Playbook::Props::String, required: true
       prop :example_key, type: Playbook::Props::String, required: true

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -10,7 +10,7 @@ type FormPillProps = {
   className?: string,
   id?: string,
   text: string,
-  name: string,
+  name?: string,
   onClick?: React.MouseEventHandler<HTMLSpanElement>,
   avatar?: boolean,
   avatarUrl?: string,
@@ -25,6 +25,7 @@ type FormPillProps = {
 const FormPill = (props: FormPillProps) => {
   const {
     className,
+    id,
     text,
     name,
     onClick = () => {},
@@ -41,7 +42,7 @@ const FormPill = (props: FormPillProps) => {
     textTransform,
   )
   return (
-    <div className={css}>
+    <div className={css} id={id}>
         {name &&
         <>
         <Avatar