playbook_ui 11.10.0.pre.alpha.pagination1 → 11.10.0.pre.alpha.pre.bold1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 75bd3baf47e85195f6c2e1809aff3f10b73de04565235469db356469ad2596be
-  data.tar.gz: 03adef3ba4130c0298b164e41d0487d828ca2e3f9fd0c5b8d2c68bd46348ce86
+  metadata.gz: 3a43eeb1b663289ece01c3728bf0c0d0348b53dcaa3ff791ac1fe255320d6f82
+  data.tar.gz: cf333518cc9c0532f39673f3203331652d592d4bad9b39556c07ffa126aa2a9c
 SHA512:
-  metadata.gz: '0815f40539b2e252e03d91ea65053289af3fcd1d64165c2e68c4ae5634c6904890bc20869915b473afd599c94866be4d2825c80cdae65f4ad6c8815b203a2fd6'
-  data.tar.gz: 191e889e44e35d7e2a479b2277b91e98e7c4065d1e33817840eb7dcee774d6ae7d2ae7adfa0c918fa3def30824d29ff8bf8aea8c76d4f4138ffa362f124149eb
+  metadata.gz: 9d28385a01e24ac9aca74db35b63c0d4799373a9912f0a42202f3dfa5e67a4a93f1c1299de00a4b545007a8c53a82928f990219b1db1ef25b8ff791a68aae003
+  data.tar.gz: 754c695cdb22bf7dfbf63550804c6f464773df5f33106995dad2266e0dc5c01e2545b88f63a9b909839cdaf5f2b10bbeb6167af180160fc88bef775ba61ba0f6

data/app/pb_kits/playbook/_playbook.scss

@@ -103,5 +103,3 @@
 @import './utilities/line_height';
 @import './utilities/display';
 @import './utilities/flexbox';
-
-@import 'pb_pagination/pagination';

data/app/pb_kits/playbook/data/menu.yml

@@ -60,7 +60,6 @@ kits:
     - badge
     - hashtag
     - pill
-  - pagination
   - popover
   - progress:
     - progress_pills

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -2,6 +2,7 @@
   pb_rails("filter", props: {
     min_width: "360px",
     id: "1",
+    margin_bottom: "xl",
     filters: [
       { name: "name", value: "John Wick" },
       { name: "city", value: "San Francisco"}
@@ -35,8 +36,6 @@
   <% end %>
 <% end %>
 
-<br>
-<br>
 
 <%=
   pb_rails("filter", props: {

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -22,6 +22,7 @@ const FilterDefault = (props) => {
             'Full Name': 'John Wick',
             'City': 'San Francisco',
           }}
+          marginBottom="xl"
           minWidth="375px"
           onSortChange={SortingChangeCallback}
           results={1}
@@ -72,7 +73,6 @@ const FilterDefault = (props) => {
 
       </Filter>
 
-      <br />
 
       <Filter
           double

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb

@@ -2,6 +2,7 @@
   pb_rails("filter", props: {
     min_width: "360px",
     id: "3",
+    margin_bottom: "xl",
     background: false,
     filters: [
       { name: "name", value: "John Wick" },
@@ -37,8 +38,6 @@
   <% end %>
 <% end %>
 
-<br>
-
 <%=
   pb_rails("filter", props: {
     min_width: "360px",

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx

@@ -17,6 +17,7 @@ const FilterNoBackground = (props) => {
           'Full Name': 'John Wick',
           'City': 'Las Vegas',
         }}
+          marginBottom="xl"
           minWidth="360px"
           results={3}
           sortOptions={{

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -6,16 +6,19 @@
   &[class*=_1] {
     @include pb_title_1;
     @include title_colors;
+    @include pb_title_bold;
   }
 
   &[class*=_2] {
     @include pb_title_2;
     @include title_colors;
+    @include pb_title_bold;
   }
 
   &[class*=_3] {
     @include pb_title_3;
     @include title_colors;
+    @include pb_title_bold;
   }
 
   &[class*=_4] {
@@ -26,4 +29,8 @@
   &.dark {
     @include pb_title_dark;
   }
+
+  &[class*=_thin] {
+    @include pb_title_thin;
+  }
 }

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -5,6 +5,7 @@ import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalPr
 
 type TitleProps = {
   aria?: {[key: string]: string},
+  bold?: boolean,
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
@@ -20,6 +21,7 @@ const Title = (props: TitleProps): React.ReactElement => {
   if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
+    bold = true,
     children,
     className,
     color,
@@ -33,8 +35,9 @@ const Title = (props: TitleProps): React.ReactElement => {
 
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
+  const getBold = bold ? '' : 'thin'
   const classes = classnames(
-    buildCss('pb_title_kit', `size_${size}`, variant, color),
+    buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
     globalProps(props),
     className,
   )

data/app/pb_kits/playbook/pb_title/docs/{_title_light.html.erb → _title_default.html.erb}

@@ -5,7 +5,7 @@
 
 <br/>
 
-<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %> 
+<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
 <%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>

data/app/pb_kits/playbook/pb_title/docs/{_title_light.jsx → _title_default.jsx}

@@ -2,7 +2,7 @@ import React from 'react'
 
 import Title from '../_title'
 
-const TitleLight = (props) => {
+const TitleDefault = (props) => {
   return (
     <div>
       <Title
@@ -38,4 +38,4 @@ const TitleLight = (props) => {
   )
 }
 
-export default TitleLight
+export default TitleDefault

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3, bold: false }) %>
+<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2, bold: false }) %>
+<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, bold: false }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import Title from '../_title'
+
+const TitleLightWeight = (props) => {
+  return (
+    <div>
+      <Title
+          bold={false}
+          size={3}
+          tag="h3"
+          text="Title 3"
+          {...props}
+      />
+      <Title
+          bold={false}
+          size={2}
+          tag="h2"
+          text="Title 2"
+          {...props}
+      />
+      <Title
+          bold={false}
+          size={1}
+          tag="h1"
+          text="Title 1"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TitleLightWeight

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md

@@ -0,0 +1,3 @@
+##### Prop
+Title kit will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
+Title `size 4` uses a heavy font weight by default and will not accept a lighter font weight.

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

@@ -1,8 +1,10 @@
 examples:
   rails:
-  - title_light: Light UI
+  - title_default: Default UI
+  - title_light_weight: Light Weight UI
   - title_colors: Colors
 
   react:
-  - title_light: Light UI
+  - title_default: Default UI
+  - title_light_weight: Light Weight UI
   - title_colors: Colors

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

@@ -1,2 +1,3 @@
-export { default as TitleLight } from './_title_light.jsx'
+export { default as TitleDefault } from './_title_default.jsx'
+export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'

data/app/pb_kits/playbook/pb_title/title.rb

@@ -17,9 +17,14 @@ module Playbook
                      values: [nil, "link"],
                      default: nil,
                      deprecated: true
+      prop :bold, type: Playbook::Props::Boolean, default: true
 
       def classname
-        generate_classname("pb_title_kit", size, variant, color)
+        generate_classname("pb_title_kit", size, variant, color, is_bold)
+      end
+
+      def is_bold
+        bold ? nil : "thin"
       end
     end
   end

data/app/pb_kits/playbook/pb_title/title.test.js

@@ -15,6 +15,19 @@ test('returns namespaced class name', () => {
   expect(kit).toHaveClass('pb_title_kit_size_3')
 })
 
+test('with thin font weight', () => {
+  render(
+    <Title
+        bold={false}
+        data={{ testid: 'primary-test' }}
+        text="Test thin font weight"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_title_kit_size_3_thin')
+})
+
 test('with colors', () => {
   render(
     <Title

data/app/pb_kits/playbook/tokens/_titles.scss

@@ -31,8 +31,19 @@
 
 @mixin pb_title_4 {
   @include pb_title($heading_4, $bolder);
+  letter-spacing: -0.03em !important;
 }
 
 @mixin pb_title_dark {
   color: $text_dk_default;
 }
+
+@mixin pb_title_bold {
+  font-weight: $bolder;
+  letter-spacing: 0em;
+}
+
+@mixin pb_title_thin {
+  font-weight: $lighter;
+  letter-spacing: $lspace_tight;
+}

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.9.0"
-  VERSION = "11.10.0.pre.alpha.pagination1"
+  PREVIOUS_VERSION = "11.10.0"
+  VERSION = "11.10.0.pre.alpha-bold1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.10.0.pre.alpha.pagination1
+  version: 11.10.0.pre.alpha.pre.bold1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-10-26 00:00:00.000000000 Z
+date: 2022-10-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1433,12 +1433,6 @@ files:
 - app/pb_kits/playbook/pb_online_status/docs/index.js
 - app/pb_kits/playbook/pb_online_status/online_status.html.erb
 - app/pb_kits/playbook/pb_online_status/online_status.rb
-- app/pb_kits/playbook/pb_pagination/_pagination.scss
-- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
-- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md
-- app/pb_kits/playbook/pb_pagination/docs/example.yml
-- app/pb_kits/playbook/pb_pagination/pagination.html.erb
-- app/pb_kits/playbook/pb_pagination/pagination.rb
 - app/pb_kits/playbook/pb_passphrase/_passphrase.jsx
 - app/pb_kits/playbook/pb_passphrase/_passphrase.scss
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
@@ -2001,9 +1995,12 @@ files:
 - app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb
 - app/pb_kits/playbook/pb_title/docs/_title_colors.jsx
 - app/pb_kits/playbook/pb_title/docs/_title_colors.md
-- app/pb_kits/playbook/pb_title/docs/_title_light.html.erb
-- app/pb_kits/playbook/pb_title/docs/_title_light.jsx
-- app/pb_kits/playbook/pb_title/docs/_title_light.md
+- app/pb_kits/playbook/pb_title/docs/_title_default.html.erb
+- app/pb_kits/playbook/pb_title/docs/_title_default.jsx
+- app/pb_kits/playbook/pb_title/docs/_title_default.md
+- app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb
+- app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx
+- app/pb_kits/playbook/pb_title/docs/_title_light_weight.md
 - app/pb_kits/playbook/pb_title/docs/example.yml
 - app/pb_kits/playbook/pb_title/docs/index.js
 - app/pb_kits/playbook/pb_title/title.html.erb

data/app/pb_kits/playbook/pb_pagination/_pagination.scss

@@ -1,59 +0,0 @@
-@import "tokens/colors";
-@import "tokens/typography";
-@import "tokens/border_radius";
-@import "tokens/shadows";
-
-.pb_pagination {
-  .pagination > li > a,
-  .pagination > li > span {
-    border: 0 !important;
-    margin-top: 1px;
-    margin-bottom: 1px;
-  }
-  .pagination > li:first-child > a,
-  .pagination > li:first-child > span {
-    border-right: 1px solid $border_light !important;
-    z-index: 2;
-  }
-  .pagination > li:last-child > a,
-  .pagination > li:last-child > span {
-    border-left: 1px solid $border_light !important;
-    z-index: 2;
-  }
-
-  .pagination {
-    border: 1px solid $border_light;
-    background-color: $white;
-
-    a {
-      color: $text_lt_default !important;
-      font-size: $text_small;
-      font-weight: $bold;
-      border: none;
-      margin-left: 1px;
-      margin-right: 1px;
-
-      &:hover {
-        background-color: $active_light;
-        color: $primary !important;
-        border-radius: $border_rad_light;
-      }
-
-      &:focus {
-        outline: 1px solid $primary !important;
-        border-radius: $border_rad_light;
-        outline-offset: -1px;
-      }
-    }
-    .active > span {
-      background-color: $primary;
-      border-radius: $border_rad_light;
-      margin-left: 1px;
-      margin-right: 1px;
-
-      &:hover {
-        box-shadow: $shadow_deeper;
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb

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

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md

@@ -1 +0,0 @@
-To apply our pagination CSS styles in rails, wrap the `will_paginate` component in our pagination component.

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

@@ -1,6 +0,0 @@
-examples:
-  
-  rails:
-  - pagination_default: Default
-  
-  

data/app/pb_kits/playbook/pb_pagination/pagination.html.erb

@@ -1,7 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-  <%= content.presence %>
-<% end %>

data/app/pb_kits/playbook/pb_pagination/pagination.rb

@@ -1,11 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbPagination
-    class Pagination < ::Playbook::KitBase
-      def classname
-        generate_classname("pb_pagination")
-      end
-    end
-  end
-end