playbook_ui 14.10.0.pre.alpha.PLAY1750pbcontenttagkitbutton5308 → 14.10.0.pre.alpha.PLAY1774timelinelabelstepspacing5274

data/app/pb_kits/playbook/pb_text_input/inputMask.ts

@@ -6,7 +6,7 @@ type InputMask = {
 }
 
 type InputMaskDictionary = {
-    [key in 'currency' | 'zipCode' | 'postalCode' | 'ssn' | 'creditCard' | 'cvv']: InputMask
+    [key in 'currency' | 'zipCode' | 'postalCode' | 'ssn']: InputMask
 }
 
 const formatCurrencyDefaultValue = (value: string): string => {
@@ -58,15 +58,6 @@ const formatSSN = (value: string): string => {
         .replace(/(\d{3})(?=\d)/, '$1-')
 }
 
-const formatCreditCard = (value: string): string => {
-    const cleaned = value.replace(/\D/g, '').slice(0, 16)
-    return cleaned.replace(/(\d{4})(?=\d)/g, '$1 ')
-}
-
-const formatCVV = (value: string): string => {
-    return value.replace(/\D/g, '').slice(0, 4)
-}
-
 export const INPUTMASKS: InputMaskDictionary = {
     currency: {
         format: formatCurrency,
@@ -93,16 +84,4 @@ export const INPUTMASKS: InputMaskDictionary = {
         pattern: '\\d{3}-\\d{2}-\\d{4}',
         placeholder: '123-45-6789',
     },
-    creditCard: {
-        format: formatCreditCard,
-        formatDefaultValue: formatCreditCard,
-        pattern: '\\d{4} \\d{4} \\d{4} \\d{4}',
-        placeholder: '1234 5678 9012 3456',
-    },
-    cvv: {
-        format: formatCVV,
-        formatDefaultValue: formatCVV,
-        pattern: '\\d{3,4}',
-        placeholder: '123',
-    },
 } 

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

@@ -226,83 +226,3 @@ 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_timeline/_timeline.scss

@@ -66,9 +66,6 @@ $gap_lg: $height_from_top + $space_lg;
         [class*=pb_timeline_item_kit] {
             &[class*=_solid] {
                 flex-basis: 100%;
-                [class=pb_timeline_item_left_block] {
-                    height: 0px;
-                }
                 [class=pb_timeline_item_step] {
                     @include flex_wrapper(row);
                     margin-top: $space_xs;
@@ -80,9 +77,6 @@ $gap_lg: $height_from_top + $space_lg;
             }
             &[class*=_dotted] {
                 flex-basis: 100%;
-                [class=pb_timeline_item_left_block] {
-                    height: 0;
-                }
                 [class=pb_timeline_item_step] {
                     @include flex_wrapper(row);
                     margin-top: $space_xs;
@@ -92,6 +86,11 @@ $gap_lg: $height_from_top + $space_lg;
                     }
                 }
             }
+            [class=pb_timeline_item_step] { 
+                > :first-child:not([class^=pb_icon_circle_kit]) { 
+                    margin-top: $space_xs;
+                }
+            }
         }
         &[class*=_with_date] {
             @include flex_wrapper(row);

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

@@ -20,7 +20,7 @@ type TimelineProps = {
   id?: string,
   orientation?: string,
   showDate?: boolean,
-  itemGap?: 'xs' | 'sm' | 'md' | 'lg' | 'none',
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'none',
 } & GlobalProps
 
 const Timeline = ({
@@ -32,15 +32,15 @@ const Timeline = ({
   id,
   orientation = 'horizontal',
   showDate = false,
-  itemGap = 'none',
+  gap = 'none',
   ...props
 }: TimelineProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const dateStyle = showDate === true ? '_with_date' : ''
-  const itemGapStyle = itemGap === 'none' ? '' : `gap_${itemGap}`
-  const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, itemGapStyle)
+  const gapStyle = gap === 'none' ? '' : `gap_${gap}`
+  const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, gapStyle)
 
   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", item_gap: "xs"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", 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", item_gap: "sm"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", 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", item_gap: "md"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", 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", item_gap: "lg"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "lg"}) do %>
             <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                 <%= pb_rails("body", props: {
                     text: "Conversation started",
@@ -91,3 +91,4 @@
         <% 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
-            itemGap="xs"
+            gap="xs"
             orientation="vertical"
         >
           <Timeline.Item
@@ -51,7 +51,7 @@ const TimelineWithGap = (props) => (
       </FlexItem>
       <FlexItem>
         <Timeline
-            itemGap="sm"
+            gap="sm"
             orientation="vertical"
         >
           <Timeline.Item
@@ -92,7 +92,7 @@ const TimelineWithGap = (props) => (
       </FlexItem>
       <FlexItem>
         <Timeline
-            itemGap="md"
+            gap="md"
             orientation="vertical"
         >
           <Timeline.Item
@@ -134,7 +134,7 @@ const TimelineWithGap = (props) => (
       </FlexItem>
       <FlexItem>
         <Timeline
-            itemGap="lg"
+            gap="lg"
             orientation="vertical"
         >
           <Timeline.Item

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

@@ -1 +1 @@
-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.
+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.

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

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -27,7 +27,6 @@ export default [
   "overflow",
   "order",
   "numberSpacing",
-  "gap",
   "maxWidth",
   "minWidth",
   "width",

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

@@ -108,10 +108,6 @@ type MinWidth = {
   minWidth?: string,
 }
 
-type Gap = {
-  gap?: string,
-}
-
 type NumberSpacing = {
   numberSpacing?: "tabular",
 }
@@ -200,7 +196,7 @@ type MinHeight = {
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
-  LineHeight & Margin & Width & MinWidth & MaxWidth & Gap & NumberSpacing & Order & Overflow & Padding &
+  LineHeight & Margin & Width & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
   Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left & Height & MaxHeight & MinHeight;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
@@ -376,11 +372,6 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += maxWidth ? `max_width_${filterClassName(maxWidth)} ` : ''
     return css.trimEnd()
   },
-  gapProps: ({ gap }: Gap) => {
-    let css = ''
-    css += gap ? `gap_${gap} ` : ''
-    return css.trimEnd()
-  },
   minHeightProps: ({ minHeight }: MinHeight) => {
     const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
     if (heightValues.includes(minHeight)) {
@@ -539,15 +530,15 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
   },
 
 
-  topProps: ({top}) => getPositioningPropsClasses('top', top),
-
-  rightProps: ({right}) => getPositioningPropsClasses('right', right),
+  topProps: ({top}) => getPositioningPropsClasses('top', top), 
 
-  bottomProps:({bottom}) =>  getPositioningPropsClasses('bottom', bottom),
+  rightProps: ({right}) => getPositioningPropsClasses('right', right), 
 
+  bottomProps:({bottom}) =>  getPositioningPropsClasses('bottom', bottom), 
+  
   leftProps: ({left}) => getPositioningPropsClasses('left', left),
-
-
+    
+  
   textAlignProps: ({ textAlign }: TextAlign) => {
     if (typeof textAlign === 'object') {
       return getResponsivePropClasses(textAlign, 'text_align')
@@ -567,7 +558,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
 
 const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[key: string]: any}} = {
   heightProps: ({ height }: Height) => {
-    return height ? { height } : {};
+    return height ? { height } : {}; 
   },
 
   maxHeightProps: ({ maxHeight }: MaxHeight) => {
@@ -575,7 +566,7 @@ const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[
   },
 
   minHeightProps: ({ minHeight }: MinHeight) => {
-    return minHeight ? { minHeight } : {};
+    return minHeight ? { minHeight } : {}; 
   },
 }