playbook_ui 14.10.0.pre.alpha.play16825206 → 14.10.0.pre.alpha.play16825301

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -226,3 +226,83 @@ test('returns masked ssn value', () => {
 
   expect(input.value).toBe('123-45-6789')
 })
+
+const TextInputCreditCardMask = (props) => {
+  const [creditCard, setValue] = useState('')
+  const handleOnChange = ({ target }) => {
+    setValue(target.value)
+  }
+
+  return (
+    <TextInput
+        mask="creditCard"
+        onChange={handleOnChange}
+        value={creditCard}
+        {...props}
+    />
+  )
+}
+
+test('returns masked credit card value', () => {
+  render(
+    <TextInputCreditCardMask
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  const input = within(kit).getByRole('textbox')
+
+  fireEvent.change(input, { target: { value: '1234567890123456' } })
+
+  expect(input.value).toBe('1234 5678 9012 3456')
+
+  fireEvent.change(input, { target: { value: '1234' } })
+
+  expect(input.value).toBe('1234')
+
+  fireEvent.change(input, { target: { value: '' } })
+
+  expect(input.value).toBe('')
+})
+
+const TextInputCVVMask = (props) => {
+  const [cvv, setValue] = useState('')
+  const handleOnChange = ({ target }) => {
+    setValue(target.value)
+  }
+
+  return (
+    <TextInput
+        mask="cvv"
+        onChange={handleOnChange}
+        value={cvv}
+        {...props}
+    />
+  )
+}
+
+test('returns masked CVV value', () => {
+  render(
+    <TextInputCVVMask
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  const input = within(kit).getByRole('textbox')
+
+  fireEvent.change(input, { target: { value: '1234' } })
+
+  expect(input.value).toBe('1234')
+
+  fireEvent.change(input, { target: { value: '123' } })
+
+  expect(input.value).toBe('123')
+
+  fireEvent.change(input, { target: { value: '' } })
+
+  expect(input.value).toBe('')
+})

data/app/pb_kits/playbook/pb_textarea/_textarea.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../pb_body/body_mixins";
 @import "./textarea_mixin";
 @import "../tokens/spacing";
@@ -60,7 +62,7 @@
 
   &.error {
     [class*=pb_body_kit] {
-      margin-top: $space_xs / 2;
+      margin-top: math.div($space_xs, 2);
     }
     textarea {
       border-color: $error;

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 
 [class^=pb_time_range_inline_kit] {
   &[class*=_center]  {
@@ -22,14 +23,14 @@
     display: flex;
     align-items: center;
     [class*=pb_time_range_inline_arrow] {
-      margin-left: $space_xs/2;
-      margin-right: $space_xs/2;
+      margin-left: math.div($space_xs, 2);
+      margin-right:math.div($space_xs, 2);
     }
     [class*=pb_time_range_inline_timezone] {
-      margin-left: $space_xs/2;
+      margin-left: math.div($space_xs, 2);
     }
     [class*=pb_time_range_inline_icon] {
-      margin-right: $space_xs/2;
+      margin-right: math.div($space_xs, 2);
     }
   }
 }

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

@@ -1,12 +1,14 @@
+@use "sass:math";
+
 @import "../tokens/colors";
 @import "../tokens/spacing";
 @import "../tokens/opacity";
 @import "../tokens/typography";
 
 $connector_width: 2px;
-$icon_margin: $space_xs/2;
+$icon_margin: math.div($space_xs, 2);
 $icon_height: 28px;
-$height_from_top: $icon_height/2 - $connector_width/2;
+$height_from_top: (math.div($icon_height, 2)) - (math.div($connector_width, 2));
 
 // Add gap variables
 $gap_xs: $height_from_top + $space_xs;

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

@@ -20,7 +20,7 @@ type TimelineProps = {
   id?: string,
   orientation?: string,
   showDate?: boolean,
-  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'none',
+  itemGap?: 'xs' | 'sm' | 'md' | 'lg' | 'none',
 } & GlobalProps
 
 const Timeline = ({
@@ -32,15 +32,15 @@ const Timeline = ({
   id,
   orientation = 'horizontal',
   showDate = false,
-  gap = 'none',
+  itemGap = 'none',
   ...props
 }: TimelineProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const dateStyle = showDate === true ? '_with_date' : ''
-  const gapStyle = gap === 'none' ? '' : `gap_${gap}`
-  const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, gapStyle)
+  const itemGapStyle = itemGap === 'none' ? '' : `gap_${itemGap}`
+  const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, itemGapStyle)
 
   return (
     <div
@@ -60,4 +60,4 @@ Timeline.Step = TimelineStep
 Timeline.Label = TimelineLabel
 Timeline.Detail = TimelineDetail
 
-export default Timeline
+export default Timeline

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.html.erb

@@ -1,6 +1,6 @@
 <%= pb_rails("flex", props: { justify: "evenly" }) do %>
     <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "xs"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "xs"}) do %>
             <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                 <%= pb_rails("body", props: {
                     text: "Conversation started",
@@ -23,7 +23,7 @@
     <% end %>
 
     <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "sm"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "sm"}) do %>
             <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                 <%= pb_rails("body", props: {
                     text: "Conversation started",
@@ -46,7 +46,7 @@
     <% end %>
 
     <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "md"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "md"}) do %>
             <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                 <%= pb_rails("body", props: {
                     text: "Conversation started",
@@ -69,7 +69,7 @@
     <% end %>
 
     <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "lg"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "lg"}) do %>
             <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                 <%= pb_rails("body", props: {
                     text: "Conversation started",
@@ -91,4 +91,3 @@
         <% end %>
     <% end %>
 <% end %>
-

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx

@@ -10,7 +10,7 @@ const TimelineWithGap = (props) => (
     <Flex justify="evenly">
     <FlexItem>
         <Timeline
-            gap="xs"
+            itemGap="xs"
             orientation="vertical"
         >
           <Timeline.Item
@@ -51,7 +51,7 @@ const TimelineWithGap = (props) => (
       </FlexItem>
       <FlexItem>
         <Timeline
-            gap="sm"
+            itemGap="sm"
             orientation="vertical"
         >
           <Timeline.Item
@@ -92,7 +92,7 @@ const TimelineWithGap = (props) => (
       </FlexItem>
       <FlexItem>
         <Timeline
-            gap="md"
+            itemGap="md"
             orientation="vertical"
         >
           <Timeline.Item
@@ -134,7 +134,7 @@ const TimelineWithGap = (props) => (
       </FlexItem>
       <FlexItem>
         <Timeline
-            gap="lg"
+            itemGap="lg"
             orientation="vertical"
         >
           <Timeline.Item

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md

@@ -1 +1 @@
-Use the optional `gap` prop to render the timeline kit with adjusted spacing between nodes. The `gap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.
+Use the optional `itemGap` prop to render the timeline kit with adjusted spacing between nodes. The `itemGap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.

data/app/pb_kits/playbook/pb_timeline/timeline.rb

@@ -8,15 +8,15 @@ module Playbook
                          default: "horizontal"
       prop :show_date, type: Playbook::Props::Boolean,
                        default: false
-      prop :gap, type: Playbook::Props::Enum,
-                 values: %w[xs sm md lg none],
-                 default: "none"
+      prop :item_gap, type: Playbook::Props::Enum,
+                      values: %w[xs sm md lg none],
+                      default: "none"
 
       def classname
         generate_classname("pb_timeline_kit",
                            orientation,
                            date_class,
-                           gap_class)
+                           item_gap_class)
       end
 
     private
@@ -25,8 +25,8 @@ module Playbook
         show_date ? "with_date" : nil
       end
 
-      def gap_class
-        gap == "none" ? nil : "gap_#{gap}"
+      def item_gap_class
+        item_gap == "none" ? nil : "gap_#{item_gap}"
       end
     end
   end

data/app/pb_kits/playbook/pb_toggle/_toggle.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../tokens/colors";
 
 $color_checkbox_success: $data_1;
@@ -8,7 +10,7 @@ $transition: .2s ease-in-out;
 [class^=pb_toggle_kit] {
   position: relative;
   $width: 44px;
-  $height: $width / 2;
+  $height: math.div($width, 2);
   $border_success: 3px solid $color_checkbox_success;
   $border_default: 3px solid $color_checkbox_default;
 
@@ -27,7 +29,7 @@ $transition: .2s ease-in-out;
       &:after {
         transition: $transition;
         content: "";
-        width: $width / 2 - 4px;
+        width: math.div($width, 2) - 4px;
         height: $height - 4px;
         background-color: $color_checkbox_default;
         border-radius: 50%;
@@ -68,7 +70,7 @@ $transition: .2s ease-in-out;
         background-color: $color_checkbox_success;
 
         &:after {
-          left: $width / 2 + 2px;
+          left: math.div($width, 2) + 2px;
           background-color: $white;
         }
       }