playbook_ui 13.16.0.pre.alpha.play1141iconkitusinglibrary1993 → 13.16.0.pre.alpha.play1141iconkitusinglibrary2037

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8bc3dd349d844e27e7f58519da152f82f91f5e3bff1127a68334b50ca0cc4ce6
-  data.tar.gz: 492f133650dfbe9d1a6bd971f3dc2d70df83d65d93e3c23ffdbf5efb2f58d0df
+  metadata.gz: aacf67192ce6bb0e2e2f018a81f6eb9ee56a54310767565636d1ab5af1a19835
+  data.tar.gz: 94f4777ec071fb07e296d840927f923a17214b100104b3a4d8ed282f385dc906
 SHA512:
-  metadata.gz: 5f21ae991fb51fe768b44ff0f743473e7e1ceed79aed2bf3a5d191ed5cbfc60e04a32dc8ea49ee203f953e7b197646d054d72bd6e1641ea7eeb0ce69c4de14f1
-  data.tar.gz: 921c84a3cb9c9a50db38257f481ff0a7ccd6bbb88753a0ba384a82b8e3d079debb7d540cd816d549f1ea028c64ed13bb031faf2cde8a95495e8bec45ebba8881
+  metadata.gz: b3a4a218afa0fc0ba1d98a2dd67569873911f9c7a1d73674e4073c72852f54a739a2a8227562ed14732ae92ebe14a040c2688ee3b301d2cf33522c79b2c448d4
+  data.tar.gz: e44dfb1e1e91896744dc99f1fb65183c28652dbb98ab0339a989050c532f8af1f5743fc448f0586ac1ba4e267346fba56c55ea7913c95b9d6e516236f979e93e

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,
+  )
+  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,15 +83,37 @@ 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
 
       def is_svg?
-        (icon || custom_icon).include?(".svg")
+        (icon || custom_icon.to_s).include?(".svg")
       end
 
     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>