playbook_ui 10.20.0 → 10.21.0.pre.alpha.jd1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 58801952abf6ff0d0a76aa1af436b9baa6e360c543051398d43e972f2fdf3268
-  data.tar.gz: f693eaafecd9f29945efbdf72eccd26e762c40a1887e8744e62e895bfae300ca
+  metadata.gz: 1c31d281357f8dc7925b97fa9b6afaf1a5b058119086ad716ee72f9d86c7a221
+  data.tar.gz: 154d9accb2a7412eb67a71fc73504da468eb3ca786b8f887667733b9a019e397
 SHA512:
-  metadata.gz: f29aa234d6d47e8cd9c851eab5c17b06fe11349c23c09eef7fa6e0e21aad7a97e7e5fafc44b1baeed7ae679a57ae6c88d5049a70dcdec4c1dd3a336c4a31e87f
-  data.tar.gz: 30bd72269287a8da66a40d0181000ce5d679675a28af2897f739d0b147b7089333e64da5e55035e88d1b8b1b25974ad966f8d9f00853dd6e82bb6160141ec050
+  metadata.gz: 5c804f0c7103265e31c1aa49d87996cddab6cc611b60c41c5d8c5dd99a4fe784bdb9e16a59720857593bfbd17cd90f7ccc8549aea096803d62eb757488851a28
+  data.tar.gz: 5e8d5c37aa6ae27821507353fb3943339a9b4cf2a04fd683b6ae3d0cece1060949160e2b8adf1e862c28577d83944d4f993fa86536fc4aad79d3b09f1ae78818

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -34,7 +34,7 @@ const Image = (props: ImageProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_image_kit', size),
+    buildCss('pb_image_kit', size ? `size_${size}` : null),
     'lazyload',
     transition,
     { rounded },

data/app/pb_kits/playbook/pb_image/_image.scss

@@ -14,7 +14,7 @@ $image-sizes: (
   object-fit: cover;
 
   @each $name, $size in $image-sizes {
-    &[class*=_#{$name}] {
+    &[class*=size_#{$name}] {
       width: $size;
       height: $size;
       object-fit: cover;
@@ -35,7 +35,7 @@ $image-sizes: (
         transition: opacity 300ms ease-in;
       }
     }
-    
+
     &.blur {
       filter: blur(5px);
       &.lazyloaded {
@@ -44,7 +44,7 @@ $image-sizes: (
         transition: filter 300ms ease-in;
       }
     }
-    
+
     &.scale {
       opacity: 0;
       transform: scale(0.9);

data/app/pb_kits/playbook/pb_image/image.rb

@@ -27,7 +27,7 @@ module Playbook
       end
 
       def size_class
-        size == "none" ? nil : "_#{size}"
+        size == "none" ? nil : "_size_#{size}"
       end
 
       def transition_class

data/app/pb_kits/playbook/pb_image/image.test.js

@@ -26,7 +26,7 @@ test('default classname', () => {
 
 test('size = xs', () => {
   const kit = renderKit(Image, props, { size: 'xs' })
-  expect(kit).toHaveClass('pb_image_kit_xs lazyload')
+  expect(kit).toHaveClass('pb_image_kit_size_xs lazyload')
 })
 
 test('transition = blur', () => {

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx

@@ -129,6 +129,10 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     trixRef.current.addEventListener('click', handleClick)
   }, [])
 
+  useEffect(() => {
+    trixRef.current.editor.loadHTML(value)
+  }, [value])
+
   const RichTextEditorClass = 'pb_rich_text_editor_kit'
   const SimpleClass = simple ? 'simple' : ''
   const FocusClass = focus ? 'focus-editor-targets' : ''

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -4,12 +4,12 @@
 
 
 [class^=pb_text_input_kit] {
+  margin-bottom: $space_sm;
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
     display: block;
   }
   .text_input_wrapper {
-    margin-bottom: $space_sm;
     display: block;
     input::placeholder,
     .text_input .placeholder {

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -75,3 +75,17 @@ test('returns additional class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} dark error`)
 })
+
+test('returns additional class name', () => {
+  render(
+    <TextInput
+        data={{ testid: testId }}
+        label="First Name"
+        marginBottom="lg"
+        placeholder="Enter first name"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} mb_lg`)
+})

data/dist/reset.css

@@ -1,2 +1,61 @@
-*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
+/* CLEAN UP AND REMOVE */
+/* Headings */
+/* Standard Font Weights */
+/* Non_Standard Font Weights */
+/*=====================================
+Base colors should not be documented.
+Only document color use.
+
+Colors -----------------------------*/
+/* Specialty Gradient -----------------*/
+/* Interface colors -------------------*/
+/* Main colors ------------------------*/
+/*=====================================
+
+Background colors ------------------*/
+/* Card colors ------------------*/
+/* Active colors ----------------------*/
+/* Hover colors -----------------------*/
+/* Focus colors -----------------------*/
+/* Border colors ----------------------*/
+/* Shadow colors ----------------------*/
+/* Text colors ------------------------*/
+/* Data colors ------------------------*/
+/* Status colors ----------------------*/
+/* Link colors ------------------------*/
+/* Product colors ---------------------*/
+/* Category colors ---------------------*/
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0; }
+  *:before, *:after {
+    box-sizing: border-box; }
+
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  height: 100vh;
+  overflow-x: hidden; }
+
+body {
+  font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
+  font-size: 16px;
+  line-height: 1.5;
+  background-color: #F3F7FB;
+  height: 100%;
+  letter-spacing: 0;
+  font-weight: 400;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  -moz-font-feature-settings: "liga" on;
+  color: #242B42;
+  margin: 0 !important;
+  padding: 0 !important;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 50px; }
+
+a {
+  text-decoration: none;
+  color: #0056CF; }
 

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.19.0"
-  VERSION = "10.20.0"
+  PREVIOUS_VERSION = "10.20.0"
+  VERSION = "10.21.0.pre.alpha.jd1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.20.0
+  version: 10.21.0.pre.alpha.jd1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-02-01 00:00:00.000000000 Z
+date: 2022-02-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -2130,9 +2130,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.1.6
 signing_key: