playbook_ui 12.23.0 → 12.24.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f67ec70c0d6e7b36d12c63070302b19e05fb73a0ff350fb0231322450415ed3b
-  data.tar.gz: 437239a1f1bc8fe1b59e9060bd619c7111b3ba70c9a74bcd4bd8535914488439
+  metadata.gz: f27b3e255fc8158201600b6221f2091e84ceb753c83d6d28a045ca256729ec05
+  data.tar.gz: d2af8d464afa9225d3a3647dc83c2a241f208849978b39312d49f45b74415937
 SHA512:
-  metadata.gz: acd3344d113e1132c9ab0f9bb022cdf614ad90f7a71cd1d5b0cadfc8a2eb1e20bab49f34570c7c2574cac06977f542d12013213e1e92288d054d82b379a425c2
-  data.tar.gz: 7b914c68ab0c769a8e75e63600eaf46027ff3afbe8b5ceede26a13f82c2b81ab920b06a12f2d66d7ba426f3194f0f60b206afed133f6817511043ff3016c16e2
+  metadata.gz: '018df9baaa8a9b1bc628873a71a2c1a5dde29e228be173511078a8f934cab375c7992f7bdd1b8e50523d401bd3554fb5f491f2fe98daf811c27e88c5ed6534a4'
+  data.tar.gz: 30cf511832a2ce5021ed6658e76f89c5ecacd040538b67e169e41071eb6451969cc8e0fe71a6855e8a413ae1465837fd122ba26baa07a49788031c21e2c00744

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

@@ -0,0 +1 @@
+![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)

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

@@ -9,3 +9,5 @@ examples:
     - avatar_monogram: Monogram
     - avatar_no_image: "Bad Image Link"
     - avatar_status: Status
+  swift:
+    - avatar_swift: Default

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -54,6 +54,7 @@ const Header = (props: CardHeaderProps) => {
   )
 }
 
+
 // Body component
 const Body = (props: CardBodyProps) => {
   const { children, padding = 'md', className } = props

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

@@ -7,7 +7,12 @@
     <%= example %>
     <br>
   </div>
-
+  
+  <% if (action_name == "kit_show_swift") %>
+    <div class="pb--kit-example-markdown pt_none <%= dark ? "dark" : "" %>">
+      <%= render_markdown(description) %>
+    </div>
+  <% end %>
   <% if show_code %>
     <div class="markdown pb--kit-example-markdown <%= dark ? "dark" : "" %>">
       <%= render_markdown(description) %>

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

@@ -11,7 +11,7 @@ module Playbook
       prop :example_title, type: Playbook::Props::String, required: true
       prop :example_key, type: Playbook::Props::String, required: true
       prop :show_code, type: Playbook::Props::Boolean, default: true
-      prop :type, type: Playbook::Props::Enum, values: %w[rails react], default: "rails"
+      prop :type, type: Playbook::Props::Enum, values: %w[rails react swift], default: "rails"
       prop :dark, type: Playbook::Props::Boolean, default: false
 
       def example
@@ -19,6 +19,9 @@ module Playbook
           render inline: source
         elsif type == "react"
           react_component example_key.camelize, { dark: dark }
+        elsif type == "swift"
+          ## render the markdown file
+          render inline: source
         end
       end
 
@@ -32,7 +35,11 @@ module Playbook
 
       def source
         @source ||= begin
-          extension = type == "react" ? "jsx" : "html.erb"
+          extension = if type == "rails"
+                        "html.erb"
+                      else
+                        type == "swift" ? "swift" : "jsx"
+                      end
           stringified_code = read_kit_file("docs", "_#{example_key}.#{extension}")
           sanitize_code(stringified_code)
         end
@@ -42,6 +49,10 @@ module Playbook
         read_kit_file("", "_#{example_key}.tsx")
       end
 
+      def swift_source
+        read_kit_file("", "_#{example_key}.swift")
+      end
+
     private
 
       def sanitize_code(stringified_code)

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

@@ -12,6 +12,7 @@
   &[class*=_2] {
     @include pb_title_2;
     @include title_colors;
+    @include pb_title_bold;
   }
 
   &[class*=_3] {

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

@@ -1 +1,2 @@
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, bold: false }) %>
+<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2, bold: false }) %>

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

@@ -1,15 +1,20 @@
-import React from 'react'
+import React from "react"
 
-import Title from '../_title'
+import Title from "../_title"
 
 const TitleLightWeight = (props) => {
   return (
     <div>
-      <Title
-          bold={false}
+      <Title bold={false}
           size={1}
-          tag="h1"
-          text="Title 1"
+          tag='h1'
+          text='Title 1'
+          {...props}
+      />
+      <Title bold={false}
+          size={2}
+          tag='h2'
+          text='Title 2'
           {...props}
       />
     </div>

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

@@ -1,4 +1,4 @@
 ##### Prop
-Title `size 1` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
-Title `size 2` & `size 3` uses a light font weight by default and will not accept a bold font weight.
+Title `size 1` & `size 2` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
+Title `size 3` uses a light font weight by default and will not accept a bold font weight.
 Title `size 4` uses a heavy font weight by default and will not accept a lighter font weight.

data/app/pb_kits/playbook/tokens/_screen_sizes.scss

@@ -38,6 +38,25 @@ $breakpoints_grid: (
     )
 );
 
+$breakpoints_max_only: (
+    xl: (
+        max: $screen-xl-max
+    ),
+    lg: (
+        max: $screen-lg-max
+    ),
+    md: (
+        max: $screen-md-max
+    ),
+    sm: (
+        max: $screen-sm-max
+    ),
+    xs: (
+        max: $screen-xs-max,
+    )
+);
+
+
 @function breakpoint($breakpoint_name) {
   @return map-get($breakpoints, $breakpoint_name);
 }

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

@@ -7,7 +7,10 @@ $space_classes: (
 	md: $space_md,
 	lg: $space_lg,
 	xl: $space_xl,
-	none: 0
+	none: 0,
+  auto: auto,
+  initial: initial,
+  inherit: inherit
 );
 
 $positions: (
@@ -41,3 +44,26 @@ $positions: (
 		}
 	}
 }
+
+@each $size, $size_value in $breakpoints_max_only {
+  @each $position_name, $position in $positions {
+    @each $space_name, $space in $space_classes {
+        $min_size: map-get($size_value, "min");
+        $max_size: map-get($size_value, "max");
+        .#{$position_name}_#{$size}_#{$space_name} {
+          @if type-of($position)=="list" {
+            @each $coordinate in $position {
+              @include break_at( $max_size) {
+              #{$coordinate}: #{$space} !important;
+              }
+            }
+          }
+          @else {
+            @include break_at( $max_size) {
+              #{$position}: #{$space} !important;
+            }
+          }
+        }
+    }
+  }
+}

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

@@ -22,7 +22,7 @@ type AlignItems = {
 type AlignSelf = {
   alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
 }
-type AllSizes = None | Sizes
+type AllSizes = None | Sizes | "auto" | "initial" | "inherit"
 
 type BorderRadius = {
   borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
@@ -153,22 +153,67 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     padding,
   }: Margin & Padding) => {
     let css = ''
-    css += marginRight ? `mr_${marginRight} ` : ''
-    css += marginLeft ? `ml_${marginLeft} ` : ''
-    css += marginTop ? `mt_${marginTop} ` : ''
-    css += marginBottom ? `mb_${marginBottom} ` : ''
-    css += marginX ? `mx_${marginX} ` : ''
-    css += marginY ? `my_${marginY} ` : ''
-    css += margin ? `m_${margin} ` : ''
-    css += paddingRight ? `pr_${paddingRight} ` : ''
-    css += paddingLeft ? `pl_${paddingLeft} ` : ''
-    css += paddingTop ? `pt_${paddingTop} ` : ''
-    css += paddingBottom ? `pb_${paddingBottom} ` : ''
-    css += paddingX ? `px_${paddingX} ` : ''
-    css += paddingY ? `py_${paddingY} ` : ''
-    css += padding ? `p_${padding} ` : ''
-    return css
+    const spacingProps = {
+      marginRight,
+      marginLeft,
+      marginTop,
+      marginBottom,
+      marginX,
+      marginY,
+      margin,
+      paddingRight,
+      paddingLeft,
+      paddingTop,
+      paddingBottom,
+      paddingX,
+      paddingY,
+      padding,
+    };
+
+    function handleObjectValue(properties: Margin | Padding, prefix: string) {
+      let classResult = '';
+
+      Object.entries(properties).forEach(([key, value]) => {
+        classResult += `${prefix}_${key}_${value} `;
+      });
+
+      return classResult;
+    }
+
+    function getPrefix(key: string) {
+      const prefixes: Record<string, string> = {
+        marginRight: 'mr',
+        marginLeft: 'ml',
+        marginTop: 'mt',
+        marginBottom: 'mb',
+        marginX: 'mx',
+        marginY: 'my',
+        margin: 'm',
+        paddingRight: 'pr',
+        paddingLeft: 'pl',
+        paddingTop: 'pt',
+        paddingBottom: 'pb',
+        paddingX: 'px',
+        paddingY: 'py',
+        padding: 'p',
+      };
+
+      return prefixes[key];
+    }
+
+    Object.entries(spacingProps).forEach(([key, value]) => {
+      if (value) {
+        if (typeof value === 'object') {
+          css += handleObjectValue(value, getPrefix(key));
+        } else {
+          const prefix = getPrefix(key);
+          css += `${prefix}_${value} `;
+        }
+      }
+    });
+    return css.trim();
   },
+
   darkProps: ({ dark }: Dark) => dark ? 'dark' : '',
   numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
     let css = ''

data/lib/playbook/pb_doc_helper.rb

@@ -84,8 +84,11 @@ module Playbook
     def pb_doc_render_clickable_title(kit, type)
       url = "#"
       begin
-        url = if type == "react"
+        url = case type
+              when "react"
                 kit_show_reacts_path(kit)
+              when "swift"
+                kit_show_swift_path(kit)
               else
                 kit_show_path(kit)
               end

data/lib/playbook/spacing.rb

@@ -50,17 +50,32 @@ module Playbook
     end
 
     def spacing_values
-      %w[none xxs xs sm md lg xl]
+      %w[none xxs xs sm md lg xl auto initial inherit]
+    end
+
+    def screen_size_values
+      %w[xs sm md lg xl]
     end
 
     def spacing_props
       selected_props = spacing_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
-      selected_props.map do |k|
-        spacing_value = send(k)
-        "#{spacing_options[k]}_#{spacing_value}" if spacing_values.include? spacing_value
-      end.compact.join(" ")
+      responsive = selected_props.present? && try(selected_props.first).is_a?(::Hash)
+      css = ""
+      selected_props.each do |prop|
+        spacing_value = send(prop)
+        prefix = spacing_options[prop]
+        if responsive
+          spacing_value.each do |key, value|
+            css += "#{prefix}_#{key}_#{value} " if screen_size_values.include?(key.to_s) && spacing_values.include?(value.to_s)
+          end
+        elsif spacing_values.include?(spacing_value)
+          css += "#{prefix}_#{spacing_value} "
+        end
+      end
+
+      css.strip unless css.blank?
     end
 
     def max_width_props

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.22.0"
-  VERSION = "12.23.0"
+  PREVIOUS_VERSION = "12.23.0"
+  VERSION = "12.24.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.23.0
+  version: 12.24.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-05-23 00:00:00.000000000 Z
+date: 2023-05-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -311,6 +311,7 @@ files:
 - app/pb_kits/playbook/pb_avatar/docs/_avatar_status.html.erb
 - app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx
 - app/pb_kits/playbook/pb_avatar/docs/_avatar_status.md
+- app/pb_kits/playbook/pb_avatar/docs/_avatar_swift.md
 - app/pb_kits/playbook/pb_avatar/docs/_description.md
 - app/pb_kits/playbook/pb_avatar/docs/_footer.md
 - app/pb_kits/playbook/pb_avatar/docs/example.yml