playbook_ui 12.6.0.pre.alpha.cssphone1 → 12.6.0.pre.alpha.sectionseparator1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 605be9613bb09fd58884e033677ec9bb2d87872b384d0ea087c715c5f53d451c
-  data.tar.gz: e37094c320262d4ebd8c5da72a6a36773718c62944ed6ed203953e3cbe017f89
+  metadata.gz: 54b4b391e78f2f58e670391168634c536434667a6e53d4ae31e803f738ee5a1d
+  data.tar.gz: 871163ff18b7cc73cd8591158fbff9aedb2cbfa647c95a68e5921ccd319fede0
 SHA512:
-  metadata.gz: be6f1cecdfe0783360be888c294a56c6936279fc04c8394cacb208a1d2915ae7e1eb66251a5bfa0d77e341cbb1c334154bd201ba5cfb432f6cfb8dae6d781e65
-  data.tar.gz: a4021982214cf9b87f14415e3de00e4d0fa781a62fc1049c72d0c25a91d5f13cf593c7a9084b8334b10111b53b69aaa24d2110acdae6b7de135ca0a3f688e52b
+  metadata.gz: 4ab7c44f1c8cdd068026bedde9b01b656e4b209bf0997ff539857867c5d5a1cd591a153084716f983b8749d643ecf8a747fde4b05600260e0312b3d02e004d7a
+  data.tar.gz: 918ca1022a5c4c4ea45436892b8fc5608b10bf06a3d0fbcb495b5f2e8f63bb2ff144b15e039eec1bd6d1ea433680c398a5324829b1f31a5afd619273c7a75271

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

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

@@ -14,6 +14,7 @@ type NavProps = {
   children?: React.Node,
   className?: string | array<string>,
   data?: object,
+  dark?: boolean,
   highlight?: boolean,
   id?: string,
   onClick?: EventHandler,
@@ -29,6 +30,7 @@ const Nav = (props: NavProps) => {
     children,
     className,
     data = {},
+    dark = false,
     highlight = true,
     id,
     link = '#',
@@ -64,6 +66,7 @@ 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 }) %>
+        <%= pb_rails("caption", props: { text: object.title, dark: dark }) %>
       <% end %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -1,46 +1,16 @@
 @import "../tokens/colors";
 
-$transform-rotate-deg: 135deg;
-$input-max-width: 284px;
-$dropdown-min-width: 340px;
-$flag-min-resolution: 192dpi;
-
 .pb_phone_number_input {
   input::placeholder {
     color: $focus_input_light;
   }
 
-  .text_input {
-    max-width: $input-max-width;
-  }
-
-  .dropdown_open {
-    .text_input {
-      border-color: $primary !important;
-    }
-
-    .iti__selected-flag:focus-visible {
-      outline-style: none;
-    }
-  }
-
   .iti__country {
     padding: 5px 10px 5px 16px;
-    transition: $transition_default;
   }
 
   .iti__selected-flag {
-    padding: 0 $space_xxs 0 $space_sm;
-
-    &[aria-expanded="true"] {
-      color: $primary_action;
-    }
-
-    &:focus-visible {
-      outline-style: solid;
-      border-radius: $space_xxs 0px 0px $space_xxs;
-      outline-color: $primary;
-    }
+    padding: 0 6px 0 16px;
   }
 
   .iti__country.iti__highlight {
@@ -61,11 +31,6 @@ $flag-min-resolution: 192dpi;
 
   .iti__flag {
     background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags.png");
-    border-radius: 1px;
-  }
-
-  .iti--separate-dial-code {
-    width: 100%;
   }
 
   .iti--separate-dial-code .iti__selected-flag {
@@ -87,50 +52,49 @@ $flag-min-resolution: 192dpi;
 
   .iti__arrow::before {
     border-style: solid;
-    border-width: 1px 1px 0 0;
+    border-width: 0.1em 0.1em 0 0;
     content: '';
     display: inline-block;
-    height: $space_xxs + 1px;
-    left: 1px;
+    height: 0.6em;
+    left: 0.1em;
     position: relative;
     vertical-align: top;
-    width: $space_xxs + 1px;
-    top: $space_xs + 2px;
-    transform: rotate($transform-rotate-deg);
+    width: 0.6em;
+    top: 10px;
+    transform: rotate(135deg);
+    font-size: 0.5em;
     color: $slate;
   }
 
   .iti__arrow.iti__arrow--up::before {
-    transform: rotate(-($transform-rotate-deg/3));
-    top: $space_xs + 4px;
-    color: $primary_action;
+    transform: rotate(-45deg);
+    top: 12px;
   }
 
   .iti__active::after {
     float: right;
     content: "";
-    margin-top: $space_xxs + 1px;
-    transform: rotate($transform-rotate-deg/3);
-    height: $space_xs + 4px;
-    width: $space_xxs + 2px;
+    margin-top: 5px;
+    transform: rotate(45deg);
+    height: 12px;
+    width: 6px;
     border-bottom: 2px solid;
     border-right: 2px solid;
     border-radius: 1px;
   }
 
   .iti__country-list {
-    min-width: $dropdown-min-width;
+    min-width: 340px;
     border-radius: $border_radius_md;
     border: 1px solid $border_light;
     box-shadow: $shadow_deep;
-    margin-top: 1px;
   }
 
   .iti__divider {
     border-bottom: 1px solid $border_light;
   }
   
-  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
     .iti__flag {
       background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags@2x.png");
     }

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -1,11 +1,11 @@
 /* @flow */
-import React, { useEffect, useRef, useState } from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-import intlTelInput from 'intl-tel-input'
-import TextInput from '../pb_text_input/_text_input'
-import 'intl-tel-input/build/js/utils.js'
+import React, { useEffect, useRef, useState } from "react"
+import classnames from "classnames"
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
+import { globalProps } from "../utilities/globalProps"
+import intlTelInput from "intl-tel-input"
+import "intl-tel-input/build/css/intlTelInput.css"
+import TextInput from "../pb_text_input/_text_input"
 
 declare global {
   interface Window {
@@ -50,7 +50,7 @@ const formatAllCountries = () => {
 formatAllCountries()
 
 const containOnlyNumbers = (value: string) => {
-  return /^[()+\-\ .\d]*$/g.test(value)
+  return /^(\++)*(\d+)$/.test(value)
 }
 
 const PhoneNumberInput = (props: PhoneNumberInputProps) => {
@@ -85,8 +85,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   const inputRef = useRef<HTMLInputElement>()
   const [inputValue, setInputValue] = useState(value)
   const [itiInit, setItiInit] = useState<any>()
-  const [error, setError] = useState('')
-  const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
+  const [error, setError] = useState("")
 
   const validateTooLongNumber = (itiInit: any) => {
     const error = itiInit.getValidationError()
@@ -134,17 +133,18 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
 
   useEffect(() => {
     const telInputInit = new intlTelInput(inputRef.current, {
-        separateDialCode: true,
-        preferredCountries,
-        allowDropdown: !disabled,
-        initialCountry,
-        onlyCountries,
-      }
+      utilsScript:
+        "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js",
+      separateDialCode: true,
+      preferredCountries,
+      allowDropdown: !disabled,
+      initialCountry,
+      onlyCountries,
+    })
+
+    inputRef.current.addEventListener("countrychange", () =>
+      validateTooLongNumber(telInputInit)
     )
-    
-    inputRef.current.addEventListener("countrychange", () => validateTooLongNumber(telInputInit))
-    inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
-    inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
 
     setItiInit(telInputInit)
   }, [])
@@ -152,7 +152,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   return (
     <div {...ariaProps} {...dataProps} className={classes}>
       <TextInput
-        className={dropDownIsOpen ? 'dropdown_open' : ''}
         disabled={disabled}
         error={error}
         id={id}

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { PhoneNumberInput } from '../../'
-import "intl-tel-input/build/css/intlTelInput.min.css"
 
 const PhoneNumberInputDefault = () => (
   <>

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

@@ -18,19 +18,21 @@ $section_colors_dark: (
   justify-content: center;
   align-items: center;
   position: relative;
-  @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;
-      }
-    }
+  span {
+    padding: 0 $space_xs;
+    display: flex;
+  }
+  &::before {
+    content: "";
+    height: 1px;
+    flex: 1;
+    @include section_separator_horizontal;
   }
   &::after {
-    @include section_separator_horizontal(false);
+    content: "";
+    height: 1px;
+    flex: 1;
+    @include section_separator_horizontal;
   }
   &[class*=_horizontal] {
     justify-content: center;
@@ -46,23 +48,13 @@ $section_colors_dark: (
   // Dark =========================
 
   &.dark {
-    &::after {
+    &::before {
       @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;
-        }
-      }
+    &::after {
+      @include section_separator_horizontal(true);
     }
     &[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,6 +25,7 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
     id,
     orientation = 'horizontal',
     text,
+    dark = false,
     variant = 'card',
   } = props
   const ariaProps = buildAriaProps(aria)
@@ -42,7 +43,7 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
       {
         text && (
           <span>
-          <Caption text={text} />
+          <Caption text={text} dark={dark}/>
         </span>
         )
       }

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

@@ -20,11 +20,4 @@
     } @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/example.yml

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

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.6.0"
-  VERSION = "12.6.0.pre.alpha.cssphone1"
+  VERSION = "12.6.0.pre.alpha.sectionseparator1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.6.0.pre.alpha.cssphone1
+  version: 12.6.0.pre.alpha.sectionseparator1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-03-06 00:00:00.000000000 Z
+date: 2023-03-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1729,8 +1729,6 @@ 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

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

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

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

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