playbook_ui 14.7.0.pre.alpha.spacingquickchange4482 → 14.7.0.pre.rc.0

data/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading.tsx

@@ -1,67 +0,0 @@
-
-import React from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
-import { Sizes } from '../types'
-
-
-type SkeletonLoadingProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  id?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  height?: string,
-  width?: string,
-  borderRadius?: string,
-  gap?: Sizes | "none",
-  stack?: number,
-  color?: "default" | "white",
-  dark?: boolean,
-} & GlobalProps
-
-const SkeletonLoading = (props: SkeletonLoadingProps): React.ReactElement => {
-  const {
-    aria = {},
-    className,
-    data = {},
-    id,
-    htmlOptions = {},
-    height = "16px",
-    width = "100%",
-    borderRadius = "sm",
-    gap = "xxs",
-    stack = 1,
-    color = "default",
-    dark = false,
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
-  const skeletonContainerCss = classnames(buildCss('pb_skeleton_loading'), globalProps(props), className)
-  const gapClass = gap !== 'none' ? `gap_${gap}` : ''
-  const innerSkeletonCss = classnames(`border_radius_${borderRadius}`,`color_${color}`, dark && 'dark', )
-  const innerSizeStyle = { height, width }
-  
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={skeletonContainerCss}
-        id={id}
-    >
-      {Array.from({ length: Number(stack) }).map((_, index) => (
-        <div
-            className={classnames(buildCss('pb_skeleton_loading_item'), innerSkeletonCss, index > 0 && gapClass)}
-            key={index}
-            style={innerSizeStyle}
-        />
-      ))}
-    </div>
-  )
-}
-
-export default SkeletonLoading

data/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading_mixins.scss

@@ -1,40 +0,0 @@
-// Animation
-@keyframes wave {
-    0% {
-      background-position: -468px 0;
-    }
-    100% {
-      background-position: 468px 0;
-    }
-}
-
-// Shimmer animation and gradient mixin based on color
-@mixin skeleton-shimmer($color) {
-    background: $color;
-    background-color: $color;
-    background-image: linear-gradient(
-      to left,
-      $color 0%,
-      lighten($color, 1%) 50%,
-      lighten($color, 1%) 60%,
-      $color 80%,
-      $color 100%
-    );
-    background-repeat: no-repeat;
-    animation: wave 1.5s linear infinite forwards;
-}
-
-@mixin skeleton-shimmer-light($color) {
-    background: $color;
-    background-color: $color;
-    background-image: linear-gradient(
-      to left,
-      $color 0%,
-      darken($color, 1%) 50%,
-      darken($color, 1%) 60%,
-      $color 80%,
-      $color 100%
-    );
-    background-repeat: no-repeat;
-    animation: wave 1.5s linear infinite forwards;
-}

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import { Flex, SkeletonLoading } from "playbook-ui"
-
-
-const SkeletonLoadingBorderRadius = (props) => (
-  <Flex justify="evenly">
-    <SkeletonLoading 
-        borderRadius="rounded" 
-        height="50px" 
-        width="100px" 
-        {...props}
-    />
-    <SkeletonLoading 
-        borderRadius="xl" 
-        height="50px" 
-        width="100px" 
-        {...props}
-    />
-    <SkeletonLoading 
-        borderRadius="lg" 
-        height="50px" 
-        width="100px" 
-        {...props}
-    />
-    <SkeletonLoading 
-        borderRadius="md" 
-        height="50px" 
-        width="100px" 
-        {...props}
-    />
-    <SkeletonLoading 
-        height="50px" 
-        width="100px" 
-        {...props}
-    />
-    <SkeletonLoading 
-        borderRadius="xs" 
-        height="50px" 
-        width="100px" 
-        {...props}
-    />
-    <SkeletonLoading 
-        borderRadius="none" 
-        height="50px" 
-        width="100px" 
-        {...props}
-    />
-  </Flex>
-)
-
-export default SkeletonLoadingBorderRadius

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.md

@@ -1 +0,0 @@
-The `borderRadius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import { Card, SkeletonLoading } from "playbook-ui"
-
-
-const SkeletonLoadingColor = (props) => (
-  <div>
-    <Card 
-        borderNone 
-        {...props}
-    >
-      <SkeletonLoading {...props}/>
-    </Card>
-    <Card 
-        background="light" 
-        borderNone 
-        {...props}
-    >
-      <SkeletonLoading 
-          color="white" 
-          {...props} 
-      />
-    </Card>
-  </div>
-)
-
-export default SkeletonLoadingColor

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.md

@@ -1 +0,0 @@
-The SkeletonLoading component has a default and a white `color` variant.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("skeleton_loading") %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx

@@ -1,11 +0,0 @@
-import React from 'react'
-import { SkeletonLoading } from "playbook-ui"
-
-
-const SkeletonLoadingDefault = (props) => (
-  <div>
-    <SkeletonLoading {...props} />
-  </div>
-)
-
-export default SkeletonLoadingDefault

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import { Card, SkeletonLoading } from "playbook-ui"
-
-
-const SkeletonLoadingHeightWidth = (props) => (
-  <div>
-    <SkeletonLoading
-        height="100px"
-        width="50%"
-        {...props}
-    />
-    <SkeletonLoading
-        gap="md"
-        height="20px"
-        marginY="md"
-        stack="3"
-        width="50px"
-        {...props}
-    />
-    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
-        marginBottom="md"
-        padding="none" 
-    >
-      <SkeletonLoading
-          borderRadius="md"
-          gap="xl"
-          height="50%"
-          width="300px"
-          {...props}
-      />
-    </Card>
-    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
-        padding="none"
-    >
-      <SkeletonLoading
-          borderRadius="md"
-          gap="xl"
-          height="30%"
-          stack="2"
-          width="70%"
-          {...props}
-      />
-    </Card>
-    <SkeletonLoading 
-        height="150px"
-        marginY="md"
-        width="150px"
-        {...props}
-    />
-    <SkeletonLoading 
-        borderRadius="rounded"
-        height="150px"
-        width="150px"
-        {...props}
-    />
-  </div>
-)
-
-export default SkeletonLoadingHeightWidth

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.md

@@ -1,3 +0,0 @@
-The `height` and `width` props accept pixel and percentage values. If using a percentage for `height`, the parent container must have a set height.
-
-Set the `height` and `width` props to the same value to make a square. A `rounded` borderRadius will make a square a circle. If using percentages to make a square, your parent container must also be a square.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import { SkeletonLoading } from "playbook-ui"
-
-
-const SkeletonLoadingLayout = (props) => (
-  <div>
-    <SkeletonLoading
-        stack="5"
-        {...props}
-    />
-    <SkeletonLoading
-        gap="md"
-        paddingTop="xl"
-        stack="3"
-        {...props}
-    />
-  </div>
-)
-
-export default SkeletonLoadingLayout

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md

@@ -1,3 +0,0 @@
-Use the `stack` and `gap` props in conjunction to layer multiple Skeleton loading bars on top of each other.
-
-`stack` accepts a number that correlates to the number of rows (1 is default), and `gap` accepts a portion of our [spacing props](https://playbook.powerapp.cloud/visual_guidelines/spacing) (`xxs` as default, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`) to set the pixel distance between each row. `gap` will not do anything if there is no corresponding `stack` prop set.

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

@@ -1,13 +0,0 @@
-examples:
-  
-  rails:
-  # - skeleton_loading_default: Default
-  
-  
-  react:
-  - skeleton_loading_default: Default
-  - skeleton_loading_color: Color
-  - skeleton_loading_layout: Layout
-  - skeleton_loading_border_radius: Border Radius
-  - skeleton_loading_height_width: Height & Width
-  

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

@@ -1,5 +0,0 @@
-export { default as SkeletonLoadingDefault } from './_skeleton_loading_default.jsx'
-export { default as SkeletonLoadingColor } from './_skeleton_loading_color.jsx'
-export { default as SkeletonLoadingLayout } from './_skeleton_loading_layout.jsx'
-export { default as SkeletonLoadingBorderRadius } from './_skeleton_loading_border_radius.jsx'
-export { default as SkeletonLoadingHeightWidth } from './_skeleton_loading_height_width.jsx'

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.html.erb

@@ -1,12 +0,0 @@
-<!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
-<!-- If using nonstandard params please un-comment out and replace with your custom params. -->
-<%= pb_content_tag(
-    # :div,
-    # aria: object.aria,
-    # class: object.classname,
-    # data: object.data,
-    # id: object.id,
-    # **combined_html_options
-) do %>
-  <span>SKELETON_LOADING CONTENT</span>
-<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.rb

@@ -1,8 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbSkeletonLoading
-    class SkeletonLoading < ::Playbook::KitBase
-    end
-  end
-end

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.test.jsx

@@ -1,81 +0,0 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import { ensureAccessible } from '../utilities/test-utils'
-import { SkeletonLoading } from 'playbook-ui'
-
-/* See these resources for more testing info:
-  - https://github.com/testing-library/jest-dom#usage for useage and examples
-  - https://jestjs.io/docs/en/using-matchers
-*/
-
-describe('SkeletonLoading', () => {
-  const defaultProps = {
-    data: { testid: 'skeleton-loading' }
-  }
-
-  it('should be accessible', async () => {
-    ensureAccessible(SkeletonLoading, defaultProps)
-  })
-
-  it('renders with default props', () => {
-    const { container } = render(<SkeletonLoading {...defaultProps} />)
-    const skeleton = screen.getByTestId('skeleton-loading')
-    
-    expect(skeleton).toBeInTheDocument()
-    expect(skeleton).toHaveClass('pb_skeleton_loading')
-    expect(container.querySelectorAll('div[class*="border_radius_"]')).toHaveLength(1)
-  })
-
-  it('renders multiple skeleton items based on stack prop', () => {
-    const props = {
-      ...defaultProps,
-      stack: 3
-    }
-    const { container } = render(<SkeletonLoading {...props} />)
-    
-    expect(container.querySelectorAll('div[class*="border_radius_"]')).toHaveLength(3)
-  })
-
-  it('applies custom styles correctly', () => {
-    const props = {
-      ...defaultProps,
-      height: '24px',
-      width: '50%',
-      borderRadius: 'lg',
-      color: 'light',
-      dark: true
-    }
-    const { container } = render(<SkeletonLoading {...props} />)
-    const skeletonItem = container.querySelector('div[class*="border_radius_"]')
-
-    expect(skeletonItem).toHaveClass('border_radius_lg')
-    expect(skeletonItem).toHaveClass('dark')
-  })
-
-  it('applies gap class to items after first one', () => {
-    const props = {
-      ...defaultProps,
-      stack: 3,
-      gap: 'md'
-    }
-    const { container } = render(<SkeletonLoading {...props} />)
-    const skeletonItems = container.querySelectorAll('div[class*="border_radius_"]')
-    
-    expect(skeletonItems[0]).not.toHaveClass('gap_md')
-    expect(skeletonItems[1]).toHaveClass('gap_md')
-    expect(skeletonItems[2]).toHaveClass('gap_md')
-  })
-
-  it('handles no gap properly', () => {
-    const props = {
-      ...defaultProps,
-      stack: 2,
-      gap: 'none'
-    }
-    const { container } = render(<SkeletonLoading {...props} />)
-    const skeletonItems = container.querySelectorAll('div[class*="border_radius_"]')
-    
-    expect(skeletonItems[0]).not.toHaveClass('gap_none')
-    expect(skeletonItems[1]).not.toHaveClass('gap_none')
-  })
-})

data/app/pb_kits/playbook/pb_timeline/detail.html.erb

@@ -1,3 +0,0 @@
-<%= pb_content_tag do %>
-  <%= content.presence %>
-<% end %>

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

@@ -1,11 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbTimeline
-    class Detail < Playbook::KitBase
-      def classname
-        generate_classname("pb_timeline_item_right_block")
-      end
-    end
-  end
-end

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

@@ -1,43 +0,0 @@
-<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
-    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
-
-      <% item.label do %>
-        <%= pb_rails("timeline/label") do %>
-          <%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
-        <% end %>
-      <% end %>
-    
-      <% item.step do %>
-        <%= pb_rails("timeline/step", props: { icon: 'check', icon_color: 'teal' }) %>
-      <% end %>
-    
-      <% item.detail do %>
-        <%= pb_rails("title_detail", props: {
-          title: "Jackson Heights",
-          detail: "37-27 74th Street"
-        }) %>
-      <% end %>
-    <% end %>
-    <%= pb_rails("timeline/item", props: { line_style: "dotted"}) do |item| %>
-
-      <% item.step do %>
-        <%= pb_rails("timeline/step") do %>
-          <%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
-        <% end %>
-      <% end %>
-    
-      <% item.detail do %>
-        <%= pb_rails("title_detail", props: {
-          title: "Greenpoint",
-          detail: "81 Gate St Brooklyn"
-        }) %>
-      <% end %>
-    <% end %>
-
-    <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do |item| %>
-      <%= pb_rails("title_detail", props: {
-          title: "Society Hill",
-          detail: "72 E St Astoria"
-      }) %>
-    <% end %>
-<% end %>

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

@@ -1,68 +0,0 @@
-import React from 'react'
-
-import Timeline from '../_timeline'
-import Title from '../../pb_title/_title'
-import Pill from '../../pb_pill/_pill'
-
-import TitleDetail from '../../pb_title_detail/_title_detail'
-
-const TimelineWithChildren = (props) => (
-  <div>
-    <Timeline orientation="horizontal"
-        showDate
-        {...props}
-    >
-      <Timeline.Item lineStyle="solid"
-          {...props}
-      >
-        <Timeline.Label>
-          <Title size={2}
-              text='Any Kit Here'
-          />
-        </Timeline.Label>
-        <Timeline.Step icon="user"
-            iconColor="royal"
-        />
-        <Timeline.Detail>
-          <TitleDetail detail="37-27 74th Street"
-              title="Jackson Heights"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-
-      <Timeline.Item lineStyle="dotted"
-          {...props}
-      >
-        <Timeline.Step>
-          <Pill text="Any Kit"
-              variant="success"
-          />
-        </Timeline.Step>
-        <Timeline.Detail>
-          <TitleDetail detail="81 Gate St Brooklyn"
-              title="Greenpoint"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-
-      <Timeline.Item lineStyle="solid"
-          {...props}
-      >
-        <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
-        <Timeline.Step icon="map-marker-alt"
-            iconColor="purple"
-        />
-        <Timeline.Detail>
-          <TitleDetail detail="72 E St Astoria"
-              title="Society Hill"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-    </Timeline>
-  </div>
-)
-
-export default TimelineWithChildren

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

@@ -1,2 +0,0 @@
-Any kit can be used inside of our compound components of label, step, or detail. Expand the code snippet below to see how to use these children elements.
-

data/app/pb_kits/playbook/pb_timeline/label.html.erb

@@ -1,12 +0,0 @@
-<%= pb_content_tag do %>
-  <% if object.date.present? %>
-    <%= pb_rails("date_stacked", props: {
-        date: object.date,
-        size: "sm",
-        align: "center"
-    }) %>
-  <% else %>
-    <%= content.presence %>
-  <% end %>
-<% end %>
-

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

@@ -1,13 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbTimeline
-    class Label < Playbook::KitBase
-      prop :date
-
-      def classname
-        generate_classname("pb_timeline_item_left_block")
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_timeline/step.html.erb

@@ -1,14 +0,0 @@
-<%= pb_content_tag do %>
-  <% if object.icon.present? %>
-    <%= pb_rails("icon_circle", props: {
-      icon: object.icon,
-      variant: object.icon_color,
-      size: "xs"
-    }) %>
-  <% else %>
-    <%= content.presence %>
-  <% end %>
-  <div class="pb_timeline_item_connector"></div>
-<% end %>
-
-

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

@@ -1,16 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbTimeline
-    class Step < Playbook::KitBase
-      prop :icon, type: Playbook::Props::String
-      prop :icon_color, type: Playbook::Props::Enum,
-                        values: %w[default royal blue purple teal red yellow green],
-                        default: "default"
-
-      def classname
-        generate_classname("pb_timeline_item_step")
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-import { buildHtmlProps } from '../../utilities/props'
-import { globalProps, GlobalProps } from "../../utilities/globalProps"
-
-type TimelineDetailProps = {
-  children?: React.ReactNode,
-  className?: string,
-  htmlOptions?: { [key: string]: any },
-} & GlobalProps
-
-const TimelineDetail: React.FC<TimelineDetailProps> = ({
-  children,
-  className,
-  htmlOptions = {},
-  ...props
-}) => {
-  const htmlProps = buildHtmlProps(htmlOptions)
-  return (
-    <div
-        {...htmlProps}
-        className={classnames('pb_timeline_item_right_block', globalProps(props), className)}
-    >
-      {children}
-    </div>
-  )
-}
-
-export default TimelineDetail