playbook_ui 14.14.0.pre.alpha.play1872verticaltimelineresponsiveissue6409 → 14.14.0.pre.alpha.revert4339revert4242play1633displaytitle6424

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2f68144468567bb0942e0754a5686d9245acb40e84273c43fd8ee3df8579e126
-  data.tar.gz: bf0767e5db39ca73b281e3859a0507af791dc325eed1da02c250ae13d922b713
+  metadata.gz: 6dcf227d7cca35e9bb16fb5e8c66f555054b5d1399838effee7faf68fbb99cee
+  data.tar.gz: 2880a15d696fa792dd93347514f071ced6241508dcd1c00298290ccc3c012bf2
 SHA512:
-  metadata.gz: 2144ebd23a67353cbe90a10bfbdc4d69971511306aa5cc28d504870ade661f64f980730bb9aaa615c636ba7d627d9e2a4d10974b048b88a03464889066331402
-  data.tar.gz: 40200e6f11faa20c4322c4d1d5057f8c8ab75eec8a8424062b8adad8848aea79b94b4a0df8f978b7f10a856ff8b8debf1902f732efebd15ea834ac8d6ef4bae5
+  metadata.gz: 8a5d6b23e39f5ec20b4b16938499ad3db31bf57881666d8baf92cbf16b2ed2e5884a57f1940b1c6001e0ea41a120f3bdf1e2107f7390c68d555ea022eb69c04a
+  data.tar.gz: eeda9230fd1a791a65f190e90580b5df2b2e7bd1a3dcd532235b4c9da20de8ac11de21a73b6c3ca9a214e2f1c849ab45bdb277dfd408276240060dc60182692d

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -243,7 +243,7 @@ $gap_lg: $height_from_top + $space_lg;
                     }
                     [class=pb_timeline_item_left_block] {
                         margin-bottom: $space_lg;
-                        min-width: $space_lg;
+                        width: $space_lg;
                     }
                     [class=pb_timeline_item_right_block] {
                         @include flex_wrapper(column);
@@ -263,7 +263,7 @@ $gap_lg: $height_from_top + $space_lg;
                     }
                     [class=pb_timeline_item_left_block] {
                         margin-bottom: $space_lg;
-                        min-width: $space_lg;
+                        width: $space_lg;
                     }
                     [class=pb_timeline_item_right_block] {
                         @include flex_wrapper(column);

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -31,6 +31,42 @@
     @include pb_title_thin;
   }
 
+  &[class*=_display] {
+    font-size: clamp(
+      24px, 
+      calc(24px + (128 - 24) * ((100vw - 320px) / (1920 - 320))), 
+      128px
+    );
+  }
+
+  &[class*=_dynamic] {
+    &[class*=_xs] {
+      font-size: min(2vw, 80vw / 16); 
+    }
+  
+    &[class*=_sm] {
+      font-size: min(2.5vw, 96vw / 16); 
+    }
+  
+    &[class*=_md] {
+      font-size: min(4vw, 160vw / 16);
+    }
+  
+    &[class*=_lg] {
+      font-size: min(5vw, 192vw / 16);
+    }
+  
+    &[class*=_xl] {
+      font-size: min(6vw, 224vw / 16);
+    }
+  
+    &[class*=_xxl] {
+      font-size: min(8vw, 256vw / 16);
+    }
+  }
+  
+
+
   @each $size, $size_value in $breakpoints_grid {
     @for $title_size_value from 1 through 4 {
       $min_size: map-get($size_value, "min");

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
 
-type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4"
+type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4" | "display"
 type SizeResponsiveType = {[key: string]: SizeType}
 
 type TitleProps = {
@@ -16,6 +16,7 @@ type TitleProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   size?: SizeType | SizeResponsiveType,
+  displaySize?: null | "xs" | "sm" | "md" | "lg" | "xl" | "xxl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
   variant?: null | "link",
@@ -32,6 +33,7 @@ const Title = (props: TitleProps): React.ReactElement => {
     htmlOptions = {},
     id,
     size = 3,
+    displaySize = null,
     bold = true,
     tag = 'h3',
     text,
@@ -56,9 +58,16 @@ const Title = (props: TitleProps): React.ReactElement => {
     return css.trim()
   }
 
+  const buildDisplaySize = () => {
+    if (displaySize) {
+      return `pb_title_kit_dynamic_${displaySize}`
+    }
+  }
+
   const classes = classnames(
     buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold),
     globalProps(props),
+    buildDisplaySize(),
     buildResponsiveSizeCss(),
     className
   )

data/app/pb_kits/playbook/pb_title/docs/_title_default.html.erb

@@ -1,10 +1,9 @@
 <%= pb_rails("title", props: {
+    margin_bottom: "md"
 })  do %>
     Default Title
 <% end %>
 
-<br/>
-
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
 <%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_default.jsx

@@ -6,10 +6,10 @@ const TitleDefault = (props) => {
   return (
     <div>
       <Title
+          marginBottom='md'
           text="Default Title"
           {...props}
       />
-      <br />
       <Title
           size={1}
           tag="h1"

data/app/pb_kits/playbook/pb_title/docs/_title_display_size.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("title", props: { text: "Display Size xs", tag: "h1", display_size: "xs" }) %>
+<%= pb_rails("title", props: { text: "Display Size sm", tag: "h1", display_size: "sm" }) %>
+<%= pb_rails("title", props: { text: "Display Size md", tag: "h1", display_size: "md" }) %>
+<%= pb_rails("title", props: { text: "Display Size lg", tag: "h1", display_size: "lg" }) %>
+<%= pb_rails("title", props: { text: "Display Size xl", tag: "h1", display_size: "xl" }) %>
+<%= pb_rails("title", props: { text: "Display Size xxl", tag: "h1", display_size: "xxl" }) %>
+<%= pb_rails("title", props: { text: "This is a size of display", tag: "h1", size: "display"}) %>

data/app/pb_kits/playbook/pb_title/docs/_title_display_size.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import Title from '../_title'
+
+const TitleDisplaySize = (props) => {
+  return (
+    <div>
+      <Title
+          displaySize="xs"
+          tag="h1"
+          text="Display Size xs"
+          {...props}
+      />
+      <Title
+          displaySize="sm"
+          tag="h1"
+          text="Display Size sm"
+          {...props}
+      />
+      <Title
+          displaySize="md"
+          tag="h1"
+          text="Display Size md"
+          {...props}
+      />
+      <Title
+          displaySize="lg"
+          tag="h1"
+          text="Display Size lg"
+          {...props}
+      />
+      <Title
+          displaySize="xl"
+          tag="h1"
+          text="Display Size xl"
+          {...props}
+      />
+      <Title
+          displaySize="xxl"
+          tag="h1"
+          text="Display Size xxl"
+          {...props}
+      />
+      <Title
+          size="display"
+          tag="h1"
+          text="This is a size of display"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TitleDisplaySize

data/app/pb_kits/playbook/pb_title/docs/_title_display_size.md

@@ -0,0 +1 @@
+Responsive sizes for large screens and tablets, perfect for digital signage.

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

@@ -5,6 +5,7 @@ examples:
   - title_colors: Colors
   - title_responsive: Responsive
   - title_truncate: Truncate
+  - title_display_size: Display Size
 
   react:
   - title_default: Default UI
@@ -12,3 +13,4 @@ examples:
   - title_colors: Colors
   - title_responsive: Responsive
   - title_truncate: Truncate
+  - title_display_size: Display Size

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

@@ -3,3 +3,4 @@ export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'
 export { default as TitleResponsive } from './_title_responsive.jsx'
 export { default as TitleTruncate } from './_title_truncate.jsx'
+export { default as TitleDisplaySize } from './_title_display_size.jsx'

data/app/pb_kits/playbook/pb_title/title.rb

@@ -16,12 +16,15 @@ module Playbook
                      default: nil,
                      deprecated: true
       prop :bold, type: Playbook::Props::Boolean, default: true
+      prop :display_size, type: Playbook::Props::Enum,
+                          values: [nil, "xs", "sm", "md", "lg", "xl", "xxl"],
+                          default: nil
 
       def classname
         if is_size_responsive
           generate_classname("pb_title_kit", variant, color, is_bold) + generate_responsive_size_classname
         else
-          generate_classname("pb_title_kit", size, variant, color, is_bold)
+          generate_classname("pb_title_kit", size, variant, color, is_bold) + generate_display_size
         end
       end
 
@@ -29,6 +32,12 @@ module Playbook
         bold ? nil : "thin"
       end
 
+      def generate_display_size
+        return "" if display_size.nil?
+
+        " pb_title_kit_dynamic_#{display_size}"
+      end
+
       def is_size_responsive
         try(:size).is_a?(::Hash)
       end