Next Version Bump (#1977)

* feat(select): add help-content slot to react component * feat(select): adds props and documentation for rails component help content * docs: fix id collision in rails example * chore: remove duplicate margin --------- Co-authored-by: Kevin Chang <kevin.chang@kajabi.com>
Kajabi · Sep 11, 2024 · 1a07220 · 1a07220
1 parent 2dd5314
commit 1a07220
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 3 deletions.
diff --git a/docs/app/views/examples/components/form_select/_preview.html.erb b/docs/app/views/examples/components/form_select/_preview.html.erb
@@ -59,6 +59,46 @@
 
 <%= sage_component SageDivider, {} %>
 
+<h3>Select with Message and Help Content</h3>
+<p>The Select component can display the "Help content" area to provide inline context alongside the label. This area allows text or other components, and may be useful when the Message area is occupied.</p>
+
+<% sample_help_content = sage_component SageLink, {
+    url: "https://help.kajabi.com",
+    label: "What are payouts?",
+    external: true,
+    launch: true,
+    help_link: false,
+    show_label: true,
+    style: "secondary",
+  } %>
+
+<%= sage_component SageFormSelect, {
+  label: "Payout currency",
+  name: "payout_currency",
+  select_options: [
+    {
+      text: "USD - United States Dollar",
+      value: "USD",
+    },
+    {
+      text: "CAD - Canadian Dollar",
+      value: "CAD",
+    },
+    {
+      text: "AUD - Australian Dollar",
+      value: "AUD",
+    },
+    {
+      text: "GBP - British Pound",
+      value: "GBP",
+    },
+  ],
+  message: "The payout currency determines the currency used when depositing funds to your bank account",
+  help_content: sample_help_content,
+} %>
+
+<%= sage_component SageDivider, {} %>
+
 <h3>Error State</h3>
 <p>The Select component can indicate an error state.</p>
 

diff --git a/docs/app/views/examples/components/form_select/_props.html.erb b/docs/app/views/examples/components/form_select/_props.html.erb
@@ -10,6 +10,12 @@
   <td><%= md('Boolean') %></td>
   <td><%= md('`false`') %></td>
 </tr>
+<tr>
+  <td><%= md('`help_content`') %></td>
+  <td><%= md('Sets the content for the "help content" area adjacent to the select\'s label') %></td>
+  <td><%= md('String') %></td>
+  <td><%= md('`nil`') %></td>
+</tr>
 <tr>
   <td><%= md('`message`') %></td>
   <td><%= md('Displays the message text for the component.') %></td>

diff --git a/docs/lib/sage_rails/app/sage_components/sage_form_select.rb b/docs/lib/sage_rails/app/sage_components/sage_form_select.rb
@@ -2,6 +2,7 @@ class SageFormSelect < SageComponent
   set_attribute_schema({
     disabled: [:optional, NilClass, TrueClass],
     has_error: [:optional, NilClass, TrueClass],
+    help_content: [:optional, NilClass, String],
     id: [:optional, NilClass, String],
     label: [:optional, NilClass, String],
     message: [:optional, NilClass, String],

diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb
@@ -7,6 +7,7 @@
 <div class="
   sage-select
   <%= "sage-form-field--error" if component.has_error %>
+  <%= "sage-select--help-content" if component.help_content %>
   <%= component.generated_css_classes %>"
   data-js-select="true"
   <%= component.generated_html_attributes.html_safe %>
@@ -48,6 +49,11 @@
     <% end %>
   </select>
   <label class="sage-select__label" for="<%= select_id %>"><%= label %></label>
+  <% if component.help_content.present? %>
+    <div class="sage-select__help-content <%= SageClassnames::SPACERS::XS_LEFT %> <%= SageClassnames::SPACERS::XS_BOTTOM %>">
+      <%= component.help_content %>
+    </div>
+  <% end %>
   <pds-icon
     aria-hidden="true"
     class="sage-select__arrow"

diff --git a/packages/sage-assets/lib/stylesheets/components/_form_select.scss b/packages/sage-assets/lib/stylesheets/components/_form_select.scss
@@ -36,6 +36,14 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $-
   grid-template-rows: min-content min-content min-content; /* needed to resolve Safari 14 layout issue */
 }
 
+.sage-select--help-content {
+  grid-template-areas:
+    "label helpcontent helpcontent"
+    "field field field"
+    "message message message";
+  grid-template-columns: 1fr auto minmax(sage-spacing(lg), min-content);
+}
+
 .sage-select__label {
   @include sage-form-field-label;
 
@@ -64,6 +72,11 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $-
   transition: 0.2s color ease;
 }
 
+.sage-select__help-content {
+  display: inline-flex;
+  grid-area: helpcontent;
+}
+
 .sage-select__field {
   @include sage-form-field();
   @include sage-focus-ring;

diff --git a/packages/sage-react/lib/Select/Select.jsx b/packages/sage-react/lib/Select/Select.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { SageTokens } from '../configs';
+import { SageClassnames, SageTokens } from '../configs';
 
 export const Select = ({
   className,
@@ -10,6 +10,7 @@ export const Select = ({
   id,
   includeLabelInOptions,
   label,
+  helpContent,
   message,
   onChange,
   options,
@@ -24,6 +25,7 @@ export const Select = ({
     {
       'sage-form-field--error': hasError,
       'sage-select--value-selected': value,
+      'sage-select--help-content': helpContent,
     }
   );
 
@@ -88,6 +90,11 @@ export const Select = ({
       {label && (
         <label htmlFor={id} className="sage-select__label">{label}</label>
       )}
+      {helpContent && (
+        <div className={`sage-select__help-content ${SageClassnames.SPACERS.XS_LEFT} ${SageClassnames.SPACERS.XS_BOTTOM}`}>
+          {helpContent}
+        </div>
+      )}
       {message && (
         <div className="sage-select__info">
           <div className="sage-select__message">{message}</div>
@@ -101,6 +108,7 @@ Select.defaultProps = {
   className: null,
   disabled: false,
   hasError: false,
+  helpContent: null,
   includeLabelInOptions: false,
   label: null,
   message: null,
@@ -115,6 +123,7 @@ Select.propTypes = {
   className: PropTypes.string,
   disabled: PropTypes.bool,
   hasError: PropTypes.bool,
+  helpContent: PropTypes.node,
   id: PropTypes.string.isRequired,
   includeLabelInOptions: PropTypes.bool,
   label: PropTypes.string,

diff --git a/packages/sage-react/lib/Select/Select.story.jsx b/packages/sage-react/lib/Select/Select.story.jsx
@@ -1,5 +1,8 @@
 import React, { useState } from 'react';
 import { Select } from './Select';
+import { Link } from '../Link';
+import { Popover } from '../Popover';
+import { SageClassnames } from '../configs';
 
 export default {
   title: 'Sage/Select',
@@ -12,7 +15,7 @@ export default {
       },
     },
   },
-  decorators: [(Story) => <div style={{ width: 300, marginLeft: 'auto', marginRight: 'auto' }}>{Story()}</div>],
+  decorators: [(Story) => <div style={{ width: 400, margin: '0 auto' }}>{Story()}</div>],
   args: {
     label: 'Select',
     id: 'field-1',
@@ -98,6 +101,71 @@ SelectWithOptionDisabled.args = {
   placeholder: 'Pick an option:'
 };
 
+export const SelectWithHelpContentLink = (args) => {
+  const [value, updateValue] = useState(args.value);
+  return (
+    <Select
+      {...args}
+      value={value}
+      onChange={(evt) => updateValue(evt.target.value)}
+    />
+  );
+};
+
+SelectWithHelpContentLink.args = {
+  id: 'field-5',
+  label: 'Choose an option:',
+  options: [
+    'First option',
+    'Second option',
+    'Third option',
+  ],
+  helpContent: (
+    <Link href="https://help.kajabi.com" target="_blank" style={Link.COLORS.SECONDARY}>
+      What&rsquo;s this?
+    </Link>
+  ),
+  placeholder: 'Choose an option:'
+};
+
+export const SelectWithHelpContentPopover = (args) => {
+  const [value, updateValue] = useState(args.value);
+  return (
+    <Select
+      {...args}
+      value={value}
+      onChange={(evt) => updateValue(evt.target.value)}
+    />
+  );
+};
+
+SelectWithHelpContentPopover.args = {
+  id: 'field-6',
+  label: 'Select fruit:',
+  options: [
+    'Apple',
+    'Banana',
+    'Orange',
+    'Peach',
+    'Pineapple',
+  ],
+  helpContent: (
+    <Popover
+      active={false}
+      iconOnly={false}
+      label="Fruit allergies?"
+      moreLinkText="Harvest schedule"
+      moreLinkURL="https://help.kajabi.com"
+      position={Popover.POSITIONS.LEFT}
+    >
+      <p className={SageClassnames.TYPE.BODY}>
+        Incredibly helpful text goes here
+      </p>
+    </Popover>
+  ),
+  placeholder: 'Select fruit:'
+};
+
 export const SelectWithOptgroups = (args) => {
   const [value, updateValue] = useState(args.value);
   return (
@@ -110,7 +178,7 @@ export const SelectWithOptgroups = (args) => {
 };
 
 SelectWithOptgroups.args = {
-  id: 'field-3',
+  id: 'field-7',
   label: 'Choose a sport...',
   value: 'nascar',
   options: [