Merge branch 'master' into PLAY-1550_lazysizes_upgrade

playbook-website/config/menu.yml

@@ -542,6 +542,9 @@ kits:
       be followed by Title 2s followed by Title 3s and so on, without skipping any
       levels.
     status: stable
+  - name: link
+    platforms: *1
+    status: beta
 - category: user
   description:
   components:

playbook/README.md

@@ -0,0 +1,94 @@
+[![npm version](https://badge.fury.io/js/playbook-ui.svg)](https://badge.fury.io/js/playbook-ui)
+[![Gem Version](https://badge.fury.io/rb/playbook_ui.svg)](https://badge.fury.io/rb/playbook_ui)
+
+# Playbook Design System
+
+Playbook is the first design system built for both Rails & React interfaces. Inspired by [Velocity](https://www.invisionapp.com/inside-design/design-resources/design-system-dashboard-ui-kit/), Playbook takes a modern design approach and applies it in a way that makes it easy to support bleeding edge or legacy systems. Playbook is built & maintained by the User Experience & Development teams at [Power Home Remodeling](https://www.techatpower.com/), the largest home remodeler in the US.
+
+## Development
+
+### Requirements
+
+- [asdf](https://github.com/asdf-vm/asdf)
+
+### Getting Started and Running Playbook for Development
+
+1. After cloning the repo, you should have the following nested folders among other files. It will be important to pay attention to which folder we are in as we get playbook running:
+    ```
+    playbook
+    │   playbook
+    │   playbook-website
+    ```
+1. Ensure your installed version of `bundler` is the same as the `BUNDLED WITH` section found in [Gemfile.lock](./Gemfile.lock). You can check the version you have by running `bundle -v`.
+
+1. From the root directory, run `./setup.sh`
+
+1. From the top-level playbook folder run `yarn start-dev` This may take a little while.
+1. Once you see the "compiled successfully" message in your terminal, navigate to [http://localhost:3000](http://localhost:3000) and you should see the playbook website.
+
+### Post Installation Startup
+
+Use `./run.sh` to run the application in one step. This will handle dependency updates then start the server. Helpful for fast start-up without bootstrapping especially when switching branches. 🚀
+
+### Running Library Tests
+
+1. `cd playbook && ./test.sh`
+
+---
+
+## Additional Resources
+
+### Adding NPM Dependencies
+
+1. You need to be working in `playbook/playbook` or `playbook/playbook-website` subdirectory
+1. run `yarn workspace playbook-website add <lib name>` to add to the website
+1. run `yarn workspace playbook-ui add <lib name>` to add to the kit source
+1. run `yarn workspace playbook-project add <lib name>` to add to the main project
+
+### Upgrading between versions
+
+See [docs/upgrade-guide](./upgrade-guide)
+
+### Releases
+
+* [Playbook Releases](https://github.com/powerhome/playbook/wiki/Playbook-Releases)
+
+### Development Environment
+
+* [Common Errors & Solutions](https://github.com/powerhome/playbook/wiki/Common-Errors-&-Solutions)
+
+### Building Playbook Kits
+
+* [Generating a Kit](https://github.com/powerhome/playbook/wiki/Generating-a-Kit)
+* [Rails Kit](https://github.com/powerhome/playbook/wiki/Rails-Kit)
+* [Rails Kit Helpers](https://github.com/powerhome/playbook/wiki/Rails-Kit-Helpers)
+* [Using a Kit within a Kit](https://github.com/powerhome/playbook/wiki/Using-a-Kit-within-a-Kit)
+* [Understanding Rails Kit HTML Wrapper](https://github.com/powerhome/playbook/wiki/Understanding-Rails-Kit-HTML-Wrapper)
+* [Kit Stylesheet](https://github.com/powerhome/playbook/wiki/Kit-Stylesheet)
+
+### Testing Playbook Kits Locally
+
+#### Testing React Kits locally
+
+1.  From inside the `playbook-ui` directory, run `yarn link`;
+1.  From Inside the project you want to test with `playbook-ui`, run `yarn link playbook-ui`;
+1.  Rebuild the project now using this version of `playbook-ui`;
+1.  Test all the things!
+1.  When finished, from inside the project you were testing with `playbook-ui`, run `yarn unlink playbook-ui`;
+1.  From Inside the `playbook-ui` directory, run `yarn unlink`;
+
+#### Jest & React-Testing-Library for Writing Tests
+
+We are currently backfilling test cases for React kit test coverage using Jest and React Testing Library. More additions and enhancements
+to the testing libraries are currently in the works. In the meantime, please take a look at these resources:
+
+- https://github.com/testing-library/jest-dom#usage for usage and examples
+- https://jestjs.io/docs/en/using-matchers
+
+When a new kit is generated, a placeholder React kit test will also be created. You can run all the tests with `yarn test`.
+
+### Important Note
+
+Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.
+
+The gem & npm package is available as open source under the terms of the [ISC License](https://opensource.org/licenses/ISC).

playbook/app/entrypoints/playbook-doc.js

@@ -59,6 +59,7 @@ import * as Layout from 'kits/pb_layout/docs'
 import * as LegendDocs from 'kits/pb_legend/docs'
 import * as Lightbox from 'kits/pb_lightbox/docs'
 import * as LineGraphDocs from 'kits/pb_line_graph/docs'
+import * as Link from 'kits/pb_link/docs'
 import * as List from 'kits/pb_list/docs'
 import * as LoadingInline from 'kits/pb_loading_inline/docs'
 import * as Map from 'kits/pb_map/docs'
@@ -167,6 +168,7 @@ WebpackerReact.registerComponents({
   ...LegendDocs,
   ...Lightbox,
   ...LineGraphDocs,
+  ...Link,
   ...List,
   ...LoadingInline,
   ...Map,

playbook/app/entrypoints/playbook.scss

@@ -30,6 +30,7 @@
 @import 'kits/pb_dialog/dialog';
 @import 'kits/pb_distribution_bar/distribution_bar';
 @import 'kits/pb_draggable/draggable';
+@import 'kits/pb_drawer/drawer';
 @import 'kits/pb_dropdown/dropdown';
 @import 'kits/pb_file_upload/file_upload';
 @import 'kits/pb_filter/filter';
@@ -54,6 +55,7 @@
 @import 'kits/pb_legend/legend';
 @import 'kits/pb_lightbox/lightbox';
 @import 'kits/pb_line_graph/line_graph';
+@import 'kits/pb_link/link';
 @import 'kits/pb_list/list';
 @import 'kits/pb_loading_inline/loading_inline';
 @import 'kits/pb_map/map';
@@ -106,7 +108,6 @@
 @import 'kits/pb_user_badge/user_badge';
 @import 'kits/pb_walkthrough/walkthrough';
 @import 'kits/pb_weekday_stacked/weekday_stacked';
-@import 'kits/pb_drawer/drawer';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

playbook/app/javascript/kits.js

@@ -59,6 +59,7 @@ export { default as Layout } from '../pb_kits/playbook/pb_layout/_layout'
 export { default as Legend } from '../pb_kits/playbook/pb_legend/_legend'
 export { default as Lightbox } from '../pb_kits/playbook/pb_lightbox/_lightbox'
 export { default as LineGraph } from '../pb_kits/playbook/pb_line_graph/_line_graph'
+export { default as Link} from '../pb_kits/playbook/pb_link/_link'
 export { default as List } from '../pb_kits/playbook/pb_list/_list'
 export { default as ListItem } from '../pb_kits/playbook/pb_list/_list_item'
 export { default as LoadingInline } from '../pb_kits/playbook/pb_loading_inline/_loading_inline'

playbook/app/pb_kits/playbook/pb_link/_link.scss

@@ -0,0 +1,66 @@
+@import "../tokens/colors";
+@import "../tokens/line_height";
+@import "../tokens/typography";
+@import "../tokens/border_radius";
+
+[class^=pb_link_kit]{
+  @include pb_link($primary);
+  &:hover {
+    color: $text_lt_default;
+  }
+  &:focus {
+    outline: none;
+  }
+  &:focus-visible {
+    border-radius: $border_rad_light;
+    outline: 1px solid $primary;
+    outline-offset: 2px;
+  }
+  &:visited {
+    color: $data_3;
+  }
+  &.dark  {
+    @include pb_link($active_dark);
+    &:hover {
+      color: $text_dk_default;
+    }
+  }
+  @each $color_name, $color_value in $pb_link_colors {
+    &[class*=_#{"" + $color_name}] {
+      @include pb_link($color_value);
+
+      &:hover {
+        color: map-get($pb_link_hover_colors, $color_name);
+      }
+
+      &:visited {
+        color: $data_3;
+      }
+    }
+  }
+
+  @each $dark_color_name, $dark_color_value in $pb_dark_link_colors{
+    &[class*=_#{$dark_color_name}][class*=dark]{
+      @include pb_link($dark_color_value);
+
+      &:hover {
+        color: map-get($pb_dark_link_hover_colors, $dark_color_name);
+      }
+
+      &:visited {
+        color: $data_3;
+      }
+    }
+  }
+
+  &[class*=_underline] {
+    text-decoration: underline;
+  }
+
+  &[class*=_disabled] {
+    pointer-events: none;
+    cursor: default;
+    color: $text_lt_lighter;
+  }
+
+}

playbook/app/pb_kits/playbook/pb_link/_link.tsx

@@ -0,0 +1,107 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+
+import Icon from '../pb_icon/_icon'
+
+type LinkProps = {
+  aria?: {[key: string]: string},
+  className?: string,
+  children?: React.ReactChild[] | React.ReactChild,
+  color?: 'default' | 'body' | 'muted' | 'destructive',
+  dark?: boolean,
+  data?: {[key: string]: string},
+  disabled?: boolean,
+  href?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((arg?: Event) => void)},
+  icon?: string,
+  iconRight?: string,
+  id?: string,
+  tag?: 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+  text?: string,
+  underline?: boolean,
+} & GlobalProps
+
+const Link = (props: LinkProps): React.ReactElement => {
+  const {
+    aria = {},
+    children,
+    className,
+    color = '',
+    data = {},
+    disabled = false,
+    href= '',
+    htmlOptions = {},
+    icon = '',
+    iconRight = '',
+    id = '',
+    tag = 'a',
+    text = '',
+    underline = false,
+  } = props
+
+  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
+  const dataProps: {[key: string]: string} = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames(
+    buildCss('pb_link_kit', color, underline ? 'underline' : '', disabled ? 'disabled' : ''),
+    globalProps(props),
+    className
+  )
+  const Tag = tag as keyof JSX.IntrinsicElements
+
+  const renderContent = () => (
+    <>
+      {icon && (
+        <Icon
+            fixedWidth
+            icon={icon}
+            marginRight="xxs"
+            size="xs"
+        />
+      )}
+      {text || children}
+      {iconRight && (
+        <Icon
+            fixedWidth
+            icon={iconRight}
+            marginLeft="xxs"
+            size="xs"
+        />
+      )}
+    </>
+  )
+
+  const commonProps = {
+    ...ariaProps,
+    ...dataProps,
+    ...htmlProps,
+    className: classes,
+    id,
+  }
+
+  if (tag === 'a') {
+    return (
+      <a
+          {...commonProps}
+          href={href}
+      >
+        {renderContent()}
+      </a>
+    )
+  } else {
+    return (
+      <a
+          {...commonProps}
+          href={href}
+      >
+        <Tag>{renderContent()}</Tag>
+      </a>
+    )
+  }
+
+}
+
+export default Link

playbook/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb

@@ -0,0 +1,30 @@
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://www.google.com/search?q=playbook+design+system",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://www.youtube.com/@PowerHRG",
+    color: "body",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://github.com/powerhome/.github/blob/main/profile/README.md",
+    color: "muted",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://rubygems.org/gems/playbook_ui/",
+    color: "destructive",
+  }) %>
+</div>