playbook_ui 12.6.0.pre.alpha.sectionseparator1 → 12.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 54b4b391e78f2f58e670391168634c536434667a6e53d4ae31e803f738ee5a1d
-  data.tar.gz: 871163ff18b7cc73cd8591158fbff9aedb2cbfa647c95a68e5921ccd319fede0
+  metadata.gz: 5ffe02f5811c58c2f395f4dc42933e6277b77d392e3cbc9657611b91c9d82617
+  data.tar.gz: b45d5e741b3d219bee86e6f37d8c3c8f7d1f4cbfb482b77fe352acfd703c64ad
 SHA512:
-  metadata.gz: 4ab7c44f1c8cdd068026bedde9b01b656e4b209bf0997ff539857867c5d5a1cd591a153084716f983b8749d643ecf8a747fde4b05600260e0312b3d02e004d7a
-  data.tar.gz: 918ca1022a5c4c4ea45436892b8fc5608b10bf06a3d0fbcb495b5f2e8f63bb2ff144b15e039eec1bd6d1ea433680c398a5324829b1f31a5afd619273c7a75271
+  metadata.gz: b86a515a02c0c3cbd155a4840243d2e50bcefca3ed2a34cca2d67078087b0e2db728fae764e01d526f4da9579aa9249fc9ae245ca435b786a8c75b6a7225bf82
+  data.tar.gz: bc734f1f1b3cd1ae6d20754334dc6a5590d77bd393a5bcad9fb73f33d330c8d46b6f5ee6eaae0d1ada5754e4e349cdf2d1b9dd2ff307decace3ed1a5a46a0b0d

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

@@ -1,6 +1,6 @@
 <%= 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 }) %>
+    <%= pb_rails("caption", props: { text: example_title }) %>
     <br />
     <%= example %>
     <br>

data/app/pb_kits/playbook/pb_nav/_nav.jsx

@@ -14,7 +14,6 @@ type NavProps = {
   children?: React.Node,
   className?: string | array<string>,
   data?: object,
-  dark?: boolean,
   highlight?: boolean,
   id?: string,
   onClick?: EventHandler,
@@ -30,7 +29,6 @@ const Nav = (props: NavProps) => {
     children,
     className,
     data = {},
-    dark = false,
     highlight = true,
     id,
     link = '#',
@@ -66,7 +64,6 @@ const Nav = (props: NavProps) => {
               onClick={onClick}
           >
             <Caption
-                dark={dark}
                 size="md"
                 text={`${title}`}
             />

data/app/pb_kits/playbook/pb_nav/nav.html.erb

@@ -6,7 +6,7 @@
   <% if object.title %>
     <%= content_tag(:div, class: "pb_nav_list_title") do %>
       <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>
-        <%= pb_rails("caption", props: { text: object.title, dark: dark }) %>
+        <%= pb_rails("caption", props: { text: object.title }) %>
       <% end %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -18,21 +18,19 @@ $section_colors_dark: (
   justify-content: center;
   align-items: center;
   position: relative;
-  span {
-    padding: 0 $space_xs;
-    display: flex;
-  }
-  &::before {
-    content: "";
-    height: 1px;
-    flex: 1;
-    @include section_separator_horizontal;
+  @each $color_name, $color_value in $section_colors_light {
+    &[class*=_#{$color_name}] {
+      span {
+        display: inline-block;
+        padding: 0 $space_xs;
+        background: #{$color_value};
+        position: relative;
+        z-index: 1;
+      }
+    }
   }
   &::after {
-    content: "";
-    height: 1px;
-    flex: 1;
-    @include section_separator_horizontal;
+    @include section_separator_horizontal(false);
   }
   &[class*=_horizontal] {
     justify-content: center;
@@ -48,13 +46,23 @@ $section_colors_dark: (
   // Dark =========================
 
   &.dark {
-    &::before {
-      @include section_separator_horizontal(true);
-    }
     &::after {
       @include section_separator_horizontal(true);
     }
+    @each $color_name, $color_value in $section_colors_dark {
+      &[class*=_#{$color_name}] {
+        span {
+          display: inline-block;
+          padding: 0 $space_xs;
+          background: #{$color_value};
+          position: relative;
+          z-index: 1;
+        }
+      }
+    }
     &[class*=_vertical] {
+      margin-left: $space_xs;
+      margin-right: $space_xs;
       &::after {
         @include section_separator_vertical(true);
       }

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -25,7 +25,6 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
     id,
     orientation = 'horizontal',
     text,
-    dark = false,
     variant = 'card',
   } = props
   const ariaProps = buildAriaProps(aria)
@@ -43,7 +42,7 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
       {
         text && (
           <span>
-          <Caption text={text} dark={dark}/>
+          <Caption text={text} />
         </span>
         )
       }

data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss

@@ -20,4 +20,11 @@
     } @else {
         background: $border_dark;
     }
+    content: "";
+    height: 1px;
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    z-index: 0;
 }

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("section_separator", props: { text: "Title Separator", variant: "background"}) %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { SectionSeparator } from '../../'
+
+const SectionSeparatorTextBackground = (props) => {
+  return (
+    <SectionSeparator
+        {...props}
+        text="Title Separator"
+        variant="background"
+    />
+  )
+}
+
+export default SectionSeparatorTextBackground

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

@@ -3,10 +3,12 @@ examples:
   rails:
   - section_separator_text: Text Separator
   - section_separator_line: Line Separator
+  - section_separator_text_background: Background Variant
   - section_separator_vertical: Vertical
 
 
   react:
   - section_separator_text: Text Separator
   - section_separator_line: Line Separator
+  - section_separator_text_background: Background Variant
   - section_separator_vertical: Vertical

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

@@ -1,3 +1,4 @@
 export { default as SectionSeparatorLine } from './_section_separator_line.jsx'
 export { default as SectionSeparatorText } from './_section_separator_text.jsx'
+export { default as SectionSeparatorTextBackground } from './_section_separator_text_background.jsx'
 export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'

data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb

@@ -4,9 +4,7 @@
     data: object.data,
     class: object.classname) do %>
     <% if object.orientation === 'horizontal' %>
-        <% if object.text %>
-            <span><%= pb_rails("caption", props: { text: object.text }) %></span>
-        <%end%>
+        <span><%= pb_rails("caption", props: { text: object.text }) %></span>
     <% end %>
     <% if object.orientation === 'vertical' %>
         <%= pb_rails("flex", props: { orientation: "column"}) do %>

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.6.0"
-  VERSION = "12.6.0.pre.alpha.sectionseparator1"
+  PREVIOUS_VERSION = "12.5.0"
+  VERSION = "12.6.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.6.0.pre.alpha.sectionseparator1
+  version: 12.6.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-03-07 00:00:00.000000000 Z
+date: 2023-03-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1729,6 +1729,8 @@ files:
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.html.erb
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx
+- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.html.erb
+- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.jsx
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.html.erb
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.jsx
 - app/pb_kits/playbook/pb_section_separator/docs/example.yml
@@ -2439,9 +2441,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.3.7
 signing_key: