playbook_ui 13.16.0.pre.alpha.play1141iconkitusinglibrary1995 → 13.16.0.pre.alpha.play1141iconkitusinglibrary2038

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 32024d2d43cfc1d67d8f19cf956cb9359f1b1251afcec6becc175fc64732aef7
-  data.tar.gz: ebbb1d9f91304f6fb0d163106b42ebd5a5a910129b216d0588f9ffc97fac5c37
+  metadata.gz: 860da30bf10cf0c8211ced01a7e1065af3e000976f8cff8e8969e9d93a46819f
+  data.tar.gz: 7e2f3097acada94569bae1a03e6ef4aa8b76a70db20edcc5c61652f0b7562de4
 SHA512:
-  metadata.gz: 5ec428c7a3116985cb854d0b2f4949693baa2a36e7976118c8b5dca18d68aa787b5433d4d3eb10d5bc8e0f1257bf5b129f04e26833f2aaa49accd09301a6a147
-  data.tar.gz: c4a2989cb47732a8a3c4128cd1c0b7de3c5d277f84da8b3bb00e7df8cfc9df869938a2848bd3aa231bf5648b07be455bbd75660337a6d05b1620e99a8947aa82
+  metadata.gz: cd2243164921842689b079efb0515617f2bd9659e371597f9676ed336cf4cc4a55e10a2f68a514be708bc9aca24f5b24e5cf408f681aa1a877e309fafa1a6d48
+  data.tar.gz: 911a0d8f72ef8bbb0ef8a9b2108ba5879648c3c9311ec8e9a110d3516a277897cba776134c857dc157656062677a52a5397c55e481d7e5cb3aa6cc377a5add7c

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -1,9 +1,51 @@
-// Rails custom icon styles
-svg.pb_custom_icon {
-  width: 1em;
-  fill: currentColor;
-  path {
-    fill: currentColor;
+$rotate-list: (90, 180, 270);
+$flip-list: (
+  "horizontal": (-1, 1),
+  "vertical": (1, -1),
+  "both": (-1, -1)
+);
+
+@keyframes pb_icon_spin {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+};
+
+svg {
+  &.pb_icon_kit {
+    @each $r in $rotate-list {
+      &.rotate_#{$r} {
+        transform: rotate(#{$r}deg);
+      }
+    }
+    @each $f, $v in $flip-list {
+      &.flip_#{$f} {
+        transform: scale($v);
+      }
+    }
+    &.pb_custom_icon path {
+        fill: currentColor;
+    }
+    &.pulse {
+      animation-name: pb_icon_spin;
+      animation-direction: normal;
+      animation-duration: 1s;
+      animation-iteration-count: infinite;
+      animation-timing-function: steps(8);
+    }
+    &.spin {
+      animation-name: pb_icon_spin;
+      animation-delay: 0s;
+      animation-direction: normal;
+      animation-duration: 2s;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+    }
   }
 }
 

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -4,10 +4,11 @@ import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/pro
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
 
-export type IconSizes = "lg"
+type IconSizeNames = "lg"
 | "xs"
 | "sm"
-| "1x"
+
+export type IconSizes = IconSizeNames | "1x"
 | "2x"
 | "3x"
 | "4x"
@@ -21,6 +22,7 @@ export type IconSizes = "lg"
 
 type IconProps = {
   aria?: {[key: string]: string},
+  aspectRatio?: string,
   border?: string,
   className?: string,
   customIcon?: {[key: string] :SVGElement},
@@ -40,16 +42,66 @@ type IconProps = {
   spin?: boolean,
 } & GlobalProps
 
+const iconSizeMap = {
+  base: 16,
+  xs: .75,
+  sm: .875,
+  lg: 1.25
+}
+
+const getSvgDimensions = (aspectRatio = '1:1', size: string): {width: number, height: number} | null => {
+  if (!size) return null
+  const aspect = aspectRatio.split(':')
+
+  const scale = size.toLowerCase().includes('x') ?
+    parseInt(size.replace(/\x/i, '')) :
+    iconSizeMap[size as IconSizeNames]
+
+  return {
+    width: (iconSizeMap.base * scale) * parseInt(aspect[0]),
+    height: (iconSizeMap.base * scale) * parseInt(aspect[1])
+  }
+}
+
 const flipMap = {
-  horizontal: 'fa-flip-horizontal',
-  vertical: 'fa-flip-vertical',
-  both: 'fa-flip-horizontal fa-flip-vertical',
-  none: ""
+  fa: {
+    horizontal: 'fa-flip-horizontal',
+    vertical: 'fa-flip-vertical',
+    both: 'fa-flip-horizontal fa-flip-vertical',
+    none: ''
+  },
+  svg: {
+    horizontal: 'flip_horizontal',
+    vertical: 'flip_vertical',
+    both: 'flip_horizontal flip_vertical',
+    none: ''
+  }
+}
+const pulseMap = {
+  fa: 'fa-pulse',
+  svg: 'pulse'
+}
+const spinMap = {
+  fa: 'fa-spin',
+  svg: 'spin'
+}
+const rotateMap = {
+  fa: {
+    90: 'fa-rotate-90',
+    180: 'fa-rotate-180',
+    270: 'fa-rotate-270'
+  },
+  svg: {
+    90: 'rotate_90',
+    180: 'rotate_180',
+    270: 'rotate_270'
+  }
 }
 
 const Icon = (props: IconProps) => {
   const {
     aria = {},
+    aspectRatio,
     border = false,
     className,
     customIcon,
@@ -64,7 +116,7 @@ const Icon = (props: IconProps) => {
     pull,
     pulse = false,
     rotation,
-    size,
+    size = '1x',
     fontStyle = 'far',
     spin = false,
   } = props
@@ -72,31 +124,37 @@ const Icon = (props: IconProps) => {
   const iconURL = typeof(icon) === 'string' && icon.includes('.svg') ? icon : null
   const iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
 
-  const faClasses = {
-    'fa-border': border,
-    'fa-fw': (iconElement) ? false : fixedWidth,
-    'fa-inverse': inverse,
-    'fa-li': listItem,
-    'fa-pulse': pulse,
-    'fa-spin': spin,
-    [`fa-${size}`]: size,
-    [`fa-pull-${pull}`]: pull,
-    [`fa-rotate-${rotation}`]: rotation,
-  }
-
   const isFA = !iconElement && !customIcon && !iconURL
+  const svgProps = isFA ? null : {...{fill: 'currentColor'}, ...getSvgDimensions(aspectRatio, size)}
 
-  if (isFA) faClasses[`fa-${icon}`] = icon as string
-
-  const classes = classnames(
-    flipMap[flip],
+  let classes = classnames(
     'pb_icon_kit',
-    (iconElement || customIcon) ? '' : fontStyle,
-    faClasses,
+    isFA ? fontStyle : null,
     globalProps(props),
     className
   )
 
+  const transformClasses = classnames(
+    flip ? flipMap[isFA ? 'fa' : 'svg'][flip] : null,
+    pulse ? pulseMap[isFA ? 'fa' : 'svg'] : null,
+    rotation ? rotateMap[isFA ? 'fa' : 'svg'][rotation] : null,
+    spin ? spinMap[isFA ? 'fa' : 'svg'] : null,
+  )
+  if (transformClasses) classes += ` ${transformClasses}`
+
+  if (isFA) {
+    const faClassList = {
+      'fa-border': border,
+      'fa-fw': (iconElement) ? false : fixedWidth,
+      'fa-inverse': inverse,
+      'fa-li': listItem,
+      [`fa-${size}`]: size,
+      [`fa-pull-${pull}`]: pull,
+    }
+    faClassList[`fa-${icon}`] = icon as string
+    classes += ` ${classnames(faClassList)}`
+  }
+
   const classesEmoji = classnames(
     'pb_icon_kit_emoji',
     globalProps(props),
@@ -117,6 +175,7 @@ const Icon = (props: IconProps) => {
             React.cloneElement(iconElement || customIcon, {
               ...dataProps,
               ...htmlProps,
+              ...svgProps,
               className: classes,
               id,
             })
@@ -139,14 +198,14 @@ const Icon = (props: IconProps) => {
     else if (iconURL)
       return (
         <>
-          <span
+          <img
               {...dataProps}
               {...htmlProps}
-              className={classesEmoji}
+              {...svgProps}
+              className={classes}
               id={id}
-          >
-            <img src={iconURL} />
-          </span>
+              src={iconURL}
+          />
         </>
       )
     else

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md

@@ -1,5 +1,15 @@
 # Tips for Custom Icons
 
+When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
+
+Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
+
+Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
+
+Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point **when designing instead of trying to retrofit the viewbox afterwards**!
+
+You must source _your own SVG into component/view_ you are working on. This can easily be done in programmatic and maintainable ways.
+
 ### React
 
 - Providing a valid React `<SVG>` element to the `icon` prop results in an `<SVG>` node within the working view.

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -83,6 +83,8 @@ module Playbook
         doc = Nokogiri::XML(URI.open(icon || custom_icon)) # rubocop:disable Security/Open
         svg = doc.at_css "svg"
         svg["class"] = "pb_custom_icon " + object.custom_icon_classname
+        svg["height"] = svg_dims[svg_size] * 16
+        svg["width"] = svg_dims[svg_size] * 16
         raw doc
       end
 
@@ -92,6 +94,26 @@ module Playbook
 
     private
 
+      def svg_size
+        size.nil? ? "1x" : size
+      end
+
+      def svg_dims
+        { "lg" => 1.25,
+          "xs" => 0.75,
+          "sm" => 0.875,
+          "1x" => 1,
+          "2x" => 2,
+          "3x" => 3,
+          "4x" => 4,
+          "5x" => 5,
+          "6x" => 6,
+          "7x" => 7,
+          "8x" => 8,
+          "9x" => 9,
+          "10x" => 10 }
+      end
+
       def border_class
         border ? "fa-border" : nil
       end

data/app/pb_kits/playbook/pb_label_value/_label_value.tsx

@@ -15,7 +15,7 @@ type LabelValueProps = {
   aria?: { [key: string]: string };
   className?: string;
   dark?: boolean;
-  data?: object;
+  data?: Record<string, unknown>;
   date?: Date;
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -10,7 +10,7 @@ type LayoutPropTypes = {
   className?: string,
   collapse?: "xs" | "sm" | "md" | "lg" | "xl",
   dark?: boolean,
-  data?: object,
+  data?: Record<string, unknown>,
   full?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   position?: "left" | "right",
@@ -168,6 +168,7 @@ const Layout = (props: LayoutPropTypes) => {
         layoutCss,
         layoutCollapseCss,
         className,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore
         globalProps(filteredProps)
       )}

data/app/pb_kits/playbook/pb_layout/layout.test.js

@@ -16,7 +16,8 @@ test("render all color variants", () => {
   testValues.forEach((variant) => {
     const { getByTestId } = render(
       <LayoutTest data={{ testid: `test-${variant}` }}
-          variant={variant} />
+          variant={variant}
+      />
     )
     expect(getByTestId(`test-${variant}`)).toHaveClass(
       `pb_layout_kit_sidebar_size_md_left_${
@@ -33,7 +34,8 @@ test("render transparent class", () => {
 
   const { getByTestId } = render(
     <LayoutTest data={{ testid: `test-${id}` }}
-        variant={id} />
+        variant={id}
+    />
   )
   expect(getByTestId(`test-${id}`)).toHaveClass(
     `pb_layout_kit_sidebar_size_md_left_${id}`
@@ -47,7 +49,8 @@ test("render all sizes variants", () => {
   testValues.forEach((size) => {
     const { getByTestId } = render(
       <LayoutTest data={{ testid: `test-${size}` }}
-          size={size} />
+          size={size}
+      />
     )
     expect(getByTestId(`test-${size}`)).toHaveClass(
       `pb_layout_kit_sidebar_size_${size}_left_light`
@@ -84,7 +87,8 @@ test("render all layout variants", () => {
   testValues.forEach(({ layout, expected }) => {
     const { getByTestId } = render(
       <Layout data={{ testid: `test-${layout}` }}
-          layout={layout}>
+          layout={layout}
+      >
         <Layout.Body>
           <Card>{"Card content"}</Card>
         </Layout.Body>

data/app/pb_kits/playbook/pb_legend/_legend.tsx

@@ -12,7 +12,7 @@ type LegendProps = {
   className?: string,
   color?: string,
   dark?: boolean,
-  data?: object,
+  data?: Record<string, unknown>,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   prefixText?: string,
@@ -64,11 +64,11 @@ const Legend = (props: LegendProps) => {
         {
           prefixText && (
             <Title
-              dark={dark}
-              size={4}
-              tag="span"
-              text={` ${prefixText} `}
-          />
+                dark={dark}
+                size={4}
+                tag="span"
+                text={` ${prefixText} `}
+            />
           )
         }
         {` ${text} `}

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx

@@ -56,15 +56,15 @@ const arrowRight = () => setIndex(current < urls.length - 1 ? current + 1 : urls
   return (
     <div
         className="Slides"
-        onTouchStart={onTouchStart} 
+        onTouchEnd={onTouchEnd} 
         onTouchMove={onTouchMove} 
-        onTouchEnd={onTouchEnd}
+        onTouchStart={onTouchStart}
     >
       {
         urls.length > 1 && (
         <CircleIconButton
             className='carousel-arrow-left'
-            dark={true}
+            dark
             icon="chevron-left"
             onClick={arrowLeft}
             variant="link"
@@ -81,7 +81,7 @@ const arrowRight = () => setIndex(current < urls.length - 1 ? current + 1 : urls
         urls.length > 1 && (
         <CircleIconButton
             className='carousel-arrow-right'
-            dark={true}
+            dark
             icon="chevron-right"
             onClick={arrowRight}
             variant="link"

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx

@@ -16,7 +16,7 @@ export default function Thumbnail({
   alt,
   width,
   url,
-  onClick = ()=>{},
+  onClick,
   buttonRef,
 }: ThumbnailType): React.ReactElement {
   const activeClasses = classnames('Thumbnail', { active })

data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx

@@ -20,8 +20,8 @@ type CarouselType = {
 export default function Carousel({
   currentIndex,
   photos,
-  onClick = ()=>{},
-  onChange = ()=>{},
+  onClick,
+  onChange = () => undefined,
   setIndex,
 }: CarouselType): React.ReactElement {
   useEffect(() => {
@@ -39,10 +39,10 @@ export default function Carousel({
   return (
     <div className="Lightbox">
       <Slides
-          setIndex={setIndex}
           current={currentIndex}
           onChange={handleChange}
           onClick={onClick}
+          setIndex={setIndex}
           urls={photos.map((photo) => photo.url)}
       />
       {photos.length > 1 ? (

data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx

@@ -61,23 +61,31 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
 
   const HeaderBody = () => (
     <React.Fragment>
-      <FlexItem flex="1" marginLeft="sm">
+      <FlexItem flex="1"
+          marginLeft="sm"
+      >
         <CircleIconButton
-          onClick={handleOnLightboxClose}
-          dark={true}
-          variant="link"
-          icon={icon}
+            dark
+            icon={icon}
+            onClick={handleOnLightboxClose}
+            variant="link"
         />
       </FlexItem>
       {title && text && (
         <FlexItem flex="5">
           <Flex justify="center">
-            <Flex align="center" orientation="column">
+            <Flex align="center"
+                orientation="column"
+            >
               {typeof title === "string" ? (
-                <Title dark paddingBottom="xxs" size={4} text={title} />
+                <Title dark
+                    paddingBottom="xxs"
+                    size={4}
+                    text={title}
+                />
               ) : (
-                <Flex justify="center"
-                   className="custom-header"
+                <Flex className="custom-header"
+                    justify="center"
                 >
                   {title}
                   </Flex>
@@ -86,8 +94,8 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
               {typeof text === "string" ? (
                 <Caption dark>{text}</Caption>
               ) : (
-                <Flex justify="center"
-                className="custom-header"
+                <Flex className="custom-header"
+                    justify="center"
                 >
                   {text}
                 </Flex>
@@ -99,12 +107,12 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
       <FlexItem flex="1">
         <Flex justify="end">
           <Button
-            className="nav-right-btn"
-            htmlType="button"
-            onClick={onClickRight}
-            dark
-            variant="link"
-            text={navRight}
+              className="nav-right-btn"
+              dark
+              htmlType="button"
+              onClick={onClickRight}
+              text={navRight}
+              variant="link"
           />
         </Flex>
       </FlexItem>
@@ -114,11 +122,11 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
   return (
     <div className="carousel-header">
       <Flex
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classnames(headerCSS, headerSpacing, className)}
-        spacing={spacing}
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={classnames(headerCSS, headerSpacing, className)}
+          spacing={spacing}
       >
         {closeable && <HeaderBody />}
         {children}

data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx

@@ -19,7 +19,7 @@ type LightboxType = {
   id?: string,
   photos: [],
   initialPhoto?: number,
-  onChange?: (index: number)=> {},
+  onChange?: (index: number)=> void,
   onClickRight?: () => void,
   onClose?: () => void,
   icon: string,
@@ -40,7 +40,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
     id = '',
     initialPhoto = 0,
     photos,
-    onChange = ()=>{},
+    onChange = () => undefined,
     onClose,
     onClickRight,
     icon = 'times',
@@ -107,18 +107,18 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
           <div className="carousel">
           <Lightbox.Header
               icon={icon}
-              onClose={onClose}
+              navRight={navRight}
               onClickRight={onClickRight}
+              onClose={onClose}
               text={description}
-              navRight={navRight}
               title={title}
           />
             {children}
             <Carousel
-                setIndex={setActivePhoto}
                 currentIndex={activePhoto}
                 onChange={handleOnSlide}
                 photos={photosMap}
+                setIndex={setActivePhoto}
             />
           </div>
         </div>

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -12,7 +12,7 @@ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 type LineGraphProps = {
   align?: "left" | "right" | "center";
   axisTitle?: string;
-  dark?: Boolean;
+  dark?: boolean;
   xAxisCategories: [];
   yAxisMin: number;
   yAxisMax: number;
@@ -138,15 +138,15 @@ const LineGraph = ({
 
   return (
     <HighchartsReact
-      containerProps={{
+        containerProps={{
         className: classnames(globalProps(props), className),
         id: id,
         ...ariaProps,
         ...dataProps,
         ...htmlProps
       }}
-      highcharts={Highcharts}
-      options={options}
+        highcharts={Highcharts}
+        options={options}
     />
   );
 };

data/app/pb_kits/playbook/pb_list/_list.tsx

@@ -9,7 +9,7 @@ type ListProps = {
   className?: string;
   children: React.ReactNode[] | React.ReactNode;
   dark?: boolean;
-  data?: object;
+  data?: Record<string, unknown>;
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   layout?: "" | "left" | "right";
@@ -72,25 +72,25 @@ const List = (props: ListProps) => {
     <div className={classes}>
       {ordered ? (
         <ol
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={className}
-          id={id}
-          role={role}
-          tabIndex={tabIndex}
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={className}
+            id={id}
+            role={role}
+            tabIndex={tabIndex}
         >
           {childrenWithProps}
         </ol>
       ) : (
         <ul
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={className}
-          id={id}
-          role={role}
-          tabIndex={tabIndex}
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={className}
+            id={id}
+            role={role}
+            tabIndex={tabIndex}
         >
           {childrenWithProps}
         </ul>

data/app/pb_kits/playbook/pb_list/_list_item.tsx

@@ -7,7 +7,7 @@ type ListItemProps = {
   aria?: { [key: string]: string },
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-  data?: object,
+  data?: Record<string, unknown>,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   tabIndex?: number,