Merge branch 'master' into play-1435-fix-darkmode-collapsible-kit

powerhome · Jul 25, 2024 · 2245760 · 2245760
2 parents 2c8c406 + 735f1d0
commit 2245760
Show file tree

Hide file tree

Showing 12 changed files with 129 additions and 40 deletions.
diff --git a/playbook-website/package.json b/playbook-website/package.json
@@ -10,8 +10,8 @@
   "dependencies": {
     "@fortawesome/fontawesome-pro": "6.2.1",
     "@mapbox/mapbox-gl-draw": "^1.4.1",
-    "@powerhome/playbook-icons": "0.0.1-alpha.29",
-    "@powerhome/playbook-icons-react": "0.0.1-alpha.29",
+    "@powerhome/playbook-icons": "0.0.1-alpha.32",
+    "@powerhome/playbook-icons-react": "0.0.1-alpha.32",
     "@powerhome/power-fonts": "0.0.1-alpha.6",
     "@rails/webpacker": "5.4.3",
     "@svgr/webpack": "5.5.0",

diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.scss b/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.scss
@@ -89,6 +89,10 @@ $form_pill_colors: (
     outline: $primary solid 2px;
     outline-offset: -1px;
   }
+  .pb_form_pill_icon {
+    height: 12px !important;
+    width: 12px !important;
+  }
   &.small {
     height: fit-content;
     height: -moz-fit-content;

diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx b/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx
@@ -50,4 +50,15 @@ test('displays size variant', () => {
     )
     const kit = screen.getByTestId('formpill')
     expect(kit).toHaveClass(`pb_form_pill_kit_primary small none`)
+});
+
+test('displays icon', () => {
+    render(
+        <FormPill            
+            data={{ testid: testId }}
+            icon={"test"}
+        />
+    )
+    const kit = screen.getByTestId('formpill')
+    expect(kit).toHaveClass(`pb_form_pill_kit_primary_icon none`)
 });
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx b/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx
@@ -21,6 +21,7 @@ type FormPillProps = {
   color?: "primary" | "neutral",
   data?: {[key: string]: string},
   tabIndex?: number,
+  icon?: string,
   closeProps?: {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -42,9 +43,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     color = "primary",
     data = {},
     tabIndex,
+    icon = "",
   } = props
+
+  const iconClass = icon ? "_icon" : ""
   const css = classnames(
-    `pb_form_pill_kit_${color}`,
+    `pb_form_pill_kit_${color}${iconClass}`,
     globalProps(props),
     className,
     size === 'small' ? 'small' : null,
@@ -61,29 +65,60 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
         {...dataProps}
         {...htmlProps}
     >
-        {name &&
+      {((name && !icon && !text) || (name && !icon && text)) && (
         <>
-        <Avatar
-            imageUrl={avatarUrl}
-            name={name}
-            size="xs"
-            status={null}
-        />
-        <Title
-            className="pb_form_pill_text"
-            size={4}
-            text={name}
-        />
+          <Avatar
+              imageUrl={avatarUrl}
+              name={name}
+              size="xs"
+              status={null}
+          />
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+          />
         </>
-        }
-
-      {text &&
+      )}
+      {((name && icon && !text) || (name && icon && text)) && (
+        <>
+          <Avatar
+              imageUrl={avatarUrl}
+              name={name}
+              size="xs"
+              status={null}
+          />
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+          />
+          <Icon
+              className="pb_form_pill_icon"
+              icon={icon}
+          />
+        </>
+      )}
+      {(!name && icon && text) && (
+        <>
+          <Icon
+              className="pb_form_pill_icon"
+              icon={icon}
+          />
+          <Title
+              className="pb_form_pill_tag"
+              size={4}
+              text={text}
+          />
+        </>
+      )}
+      {(!name && !icon && text) && (
         <Title
             className="pb_form_pill_tag"
             size={4}
             text={text}
         />
-      }
+      )}
       <div
           className="pb_form_pill_close"
           onClick={onClick}

diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.html.erb b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.html.erb
@@ -0,0 +1,5 @@
+<%= pb_rails("form_pill", props: {
+    icon: "badge-check",
+    text: "icon and tag",
+    tabindex: 0,
+}) %>
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.jsx b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.jsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import FormPill from '../_form_pill'
+
+const FormPillIcon = (props) => {
+  return (
+    <div>
+      <FormPill
+          icon="badge-check"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="icon and tag"
+          {...props}
+      />
+    </div>
+  )
+}
+export default FormPillIcon
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/example.yml b/playbook/app/pb_kits/playbook/pb_form_pill/docs/example.yml
@@ -5,10 +5,11 @@ examples:
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
-
+  # - form_pill_icon: Form Pill Icon
 
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
+  # - form_pill_icon: Form Pill Icon
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/index.js b/playbook/app/pb_kits/playbook/pb_form_pill/docs/index.js
@@ -2,4 +2,4 @@ export { default as FormPillUser } from './_form_pill_user.jsx'
 export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
-
+export { default as FormPillIcon } from './_form_pill_icon.jsx'
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb b/playbook/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb
@@ -1,12 +1,19 @@
 <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
-      <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
-        <% elsif object.text.present? %>
-          <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
-            <% end %>
-
-              <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
-                <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
-                  <% end %>
-                    <% end %>
+    <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
+    <% if object.icon.present? %>
+      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
+    <% end %>
+  <% elsif object.text.present? %>
+      <% if object.icon.present? %>
+        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
+      <% end %>
+      <% if object.text.present? %>
+        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
+      <% end %>
+  <% end %>
+  <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
+    <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
+  <% end %>
+<% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/form_pill.rb b/playbook/app/pb_kits/playbook/pb_form_pill/form_pill.rb
@@ -15,9 +15,10 @@ class FormPill < Playbook::KitBase
                    values: %w[primary neutral],
                    default: "primary"
       prop :tabindex
+      prop :icon
 
       def classname
-        generate_classname("pb_form_pill_kit", color, name, text, text_transform)
+        generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform)
       end
 
       def display_text
@@ -27,6 +28,10 @@ def display_text
       def size_class
         size == "small" ? " small" : ""
       end
+
+      def icon_class
+        icon ? "icon" : nil
+      end
     end
   end
 end
diff --git a/playbook/spec/pb_kits/playbook/kits/form_pill_spec.rb b/playbook/spec/pb_kits/playbook/kits/form_pill_spec.rb
@@ -10,12 +10,14 @@
   it { is_expected.to define_prop(:avatar_url) }
   it { is_expected.to define_prop(:size) }
   it { is_expected.to define_prop(:color) }
+  it { is_expected.to define_prop(:icon) }
 
   describe "#classname" do
     it "returns namespaced class name", :aggregate_failures do
       expect(subject.new({}).classname).to eq "pb_form_pill_kit_primary_none"
       expect(subject.new(classname: "additional_class").classname).to eq "pb_form_pill_kit_primary_none additional_class"
       expect(subject.new(color: "neutral").classname).to eq "pb_form_pill_kit_neutral_none"
+      expect(subject.new(icon: "user").classname).to eq "pb_form_pill_kit_primary_icon_none"
     end
   end
 end
diff --git a/yarn.lock b/yarn.lock
@@ -2832,15 +2832,15 @@
   resolved "https://npm.powerapp.cloud/@powerhome/eslint-config/-/eslint-config-0.1.0.tgz#f1e1151481f51421186ba8caad99fadb24b1fe51"
   integrity sha512-8e5DRgnKPbJ+ofAtqjUPZTxcgHg/TVf52WeNqAGBUXSS4QWHemL6fj1n/YHfAIvx3aMUhFwrw2lUNofUocgK3A==
 
-"@powerhome/[email protected].29":
-  version "0.0.1-alpha.29"
-  resolved "https://npm.powerapp.cloud/@powerhome/playbook-icons-react/-/ce27570207d2c1381e225ecb4266cb0c7e391e17#ce27570207d2c1381e225ecb4266cb0c7e391e17"
-  integrity sha512-GwsEN+rgyJejOCw1a0lwLCwXIjd20F19SiWC3YpzQSPiDYJQ8dCrZeFAt3K0ulttPIzZ0j7rCayN9A0Yy9ISiw==
-
-"@powerhome/[email protected].29":
-  version "0.0.1-alpha.29"
-  resolved "https://npm.powerapp.cloud/@powerhome/playbook-icons/-/a2e3f857e6c0c6a3ca601f391e66a77cc54f759d#a2e3f857e6c0c6a3ca601f391e66a77cc54f759d"
-  integrity sha512-IqhDXWZe2+Oeggka5thMt0scmQylFVrCDzXlymjwd6uxsjFNiejaUi8sV+rrJ73TTTdCAAOzKLj3K8F4yZcboQ==
+"@powerhome/[email protected].32":
+  version "0.0.1-alpha.32"
+  resolved "https://npm.powerapp.cloud/@powerhome/playbook-icons-react/-/10baa7174915f72cc78a674cd5565397668546d5#10baa7174915f72cc78a674cd5565397668546d5"
+  integrity sha512-5YmcZ05OjHBHbCXvGPL7DKhX8cFlAJ4V/iNBNWcXGAhsGkzso/4Fni7a1r4iiId9aEkLMpN32nmKyPwnDlC2AA==
+
+"@powerhome/[email protected].32":
+  version "0.0.1-alpha.32"
+  resolved "https://npm.powerapp.cloud/@powerhome/playbook-icons/-/ecaa507c39b0d19b1779daa1586278a6e5af94cc#ecaa507c39b0d19b1779daa1586278a6e5af94cc"
+  integrity sha512-YSlm52Ckz8PCjQ+23wD0/QECrQNZoAa9swiG97mhXXym5gQw7tWgJke+U/i3qlzcY5xtOvT2whwAF5co+XzoIw==
 
 "@powerhome/[email protected]":
   version "0.0.1-alpha.6"