From 04b42b18f8d920d5aaf29114c9df527c4a546c81 Mon Sep 17 00:00:00 2001 From: Monica Wheeler Date: Tue, 29 Aug 2023 17:54:59 -0500 Subject: [PATCH 1/5] docs(intro): react - update intro page to have content --- packages/sage-react/lib/Introduction.jsx | 27 +++++++++++++++++++ .../sage-react/lib/Introduction.story.mdx | 5 ++-- packages/sage-react/lib/index.js | 1 + 3 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 packages/sage-react/lib/Introduction.jsx diff --git a/packages/sage-react/lib/Introduction.jsx b/packages/sage-react/lib/Introduction.jsx new file mode 100644 index 0000000000..c115b4ac3f --- /dev/null +++ b/packages/sage-react/lib/Introduction.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import PackageInfo from '../../../docs/package.json'; + +export const Introduction = () => ( +
+

Welcome to React Storybook Design System! 🎉

+

Hello and welcome! We're delighted to have you explore our design system. Our components are crafted with consistency, reusability, and clarity. With Sage, your development process will be smoother and more efficient. +

+
+

Recommended Components to Start With

+ +
+

Dive right into these components to get a feel of our system. And remember, we're always here to help should you have any questions or feedback!

+
+

Happy coding! 🚀

+
+

Version Information

+

{`v${PackageInfo.version}`}

+

View the change log.

+
+); diff --git a/packages/sage-react/lib/Introduction.story.mdx b/packages/sage-react/lib/Introduction.story.mdx index 1944bef74d..630228c33c 100644 --- a/packages/sage-react/lib/Introduction.story.mdx +++ b/packages/sage-react/lib/Introduction.story.mdx @@ -1,7 +1,6 @@ import { Meta } from "@storybook/addon-docs"; +import { Introduction } from './Introduction'; -# Sage React Storybook - -Content coming soon! \ No newline at end of file + \ No newline at end of file diff --git a/packages/sage-react/lib/index.js b/packages/sage-react/lib/index.js index dbc7e1f753..923fd42f1e 100644 --- a/packages/sage-react/lib/index.js +++ b/packages/sage-react/lib/index.js @@ -37,6 +37,7 @@ export { Icon } from './Icon'; export { IconCard } from './IconCard'; export { IconList } from './IconList'; export { Indicator } from './Indicator'; +export { Introduction } from './Introduction'; export { Input } from './Input'; export { Label } from './Label'; export { Link } from './Link'; From cc9908fb7c745d8e27d4cd69e16bb784215b11a9 Mon Sep 17 00:00:00 2001 From: Monica Wheeler Date: Fri, 15 Sep 2023 11:19:23 -0500 Subject: [PATCH 2/5] docs(intro): react - add intro page copy --- packages/sage-react/lib/Introduction.jsx | 19 ++++++++++--------- .../sage-react/lib/Introduction.story.mdx | 2 +- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/sage-react/lib/Introduction.jsx b/packages/sage-react/lib/Introduction.jsx index c115b4ac3f..82bda1121d 100644 --- a/packages/sage-react/lib/Introduction.jsx +++ b/packages/sage-react/lib/Introduction.jsx @@ -3,25 +3,26 @@ import PackageInfo from '../../../docs/package.json'; export const Introduction = () => (
-

Welcome to React Storybook Design System! 🎉

-

Hello and welcome! We're delighted to have you explore our design system. Our components are crafted with consistency, reusability, and clarity. With Sage, your development process will be smoother and more efficient. +

Welcome to the React Storybook for Sage!

+

Sage is our source of truth, providing everything + you need to build the best experiences for all Kajabi entrepreneurs.


Recommended Components to Start With

    -
  • Button - A versatile component, offering various sizes and styles.
    • -
  • Input - Ensures user inputs are captured seamlessly, with built-invalidation features.
    • -
  • Card - Ideal for displaying content in a neat, organized manner.
    • -
  • Modal - Capture user's attention with our highly customizable modal dialogs.
    • -
  • Tooltip - Provide additional information on hover or click, enhancing user understanding.
    • +
  • Button - A versatile component, offering various styles.
    • +
  • Card - Ideal for displaying content in a neat, organized manner.
    • +
  • Modal - Capture users attention with our highly customizable modal dialogs.

-

Dive right into these components to get a feel of our system. And remember, we're always here to help should you have any questions or feedback!

+

Dive into these components to get a feel for our system. + And remember, we are always here to help should you have any questions or feedback! +


Happy coding! 🚀


Version Information

{`v${PackageInfo.version}`}

-

View the change log.

+

Change log for {`v${PackageInfo.version}`}.

); diff --git a/packages/sage-react/lib/Introduction.story.mdx b/packages/sage-react/lib/Introduction.story.mdx index 630228c33c..c053c6c940 100644 --- a/packages/sage-react/lib/Introduction.story.mdx +++ b/packages/sage-react/lib/Introduction.story.mdx @@ -1,6 +1,6 @@ import { Meta } from "@storybook/addon-docs"; import { Introduction } from './Introduction'; - + \ No newline at end of file From f85a536ceb5f8d887f0db46b4face2c7062d37ac Mon Sep 17 00:00:00 2001 From: Monica Wheeler Date: Fri, 15 Sep 2023 11:25:45 -0500 Subject: [PATCH 3/5] docs(intro): react - add slack link to sage support --- packages/sage-react/lib/Introduction.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/sage-react/lib/Introduction.jsx b/packages/sage-react/lib/Introduction.jsx index 82bda1121d..d954c58236 100644 --- a/packages/sage-react/lib/Introduction.jsx +++ b/packages/sage-react/lib/Introduction.jsx @@ -16,7 +16,7 @@ export const Introduction = () => (

Dive into these components to get a feel for our system. - And remember, we are always here to help should you have any questions or feedback! + And remember, we are always here to help should you have any questions or feedback at our internal channel for Sage Support.


Happy coding! 🚀

From 203ac9e8d28fa1e35e0c3a8271b123b28af2cf1e Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Mon, 18 Sep 2023 15:39:01 -0700 Subject: [PATCH 4/5] docs: update color palette syntax in docs --- docs/app/views/pages/_color_values.html.erb | 10 +++++----- docs/app/views/pages/_color_values_base.html.erb | 2 +- docs/app/views/pages/_color_values_neutral.html.erb | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/app/views/pages/_color_values.html.erb b/docs/app/views/pages/_color_values.html.erb index 6fb72f7861..fee9cb8e38 100644 --- a/docs/app/views/pages/_color_values.html.erb +++ b/docs/app/views/pages/_color_values.html.erb @@ -24,7 +24,7 @@ <%= sage_component SageCopyButton, { borderless: true, css_classes: "colors__copy-btn", - value: "SageTokens::COLOR_PALETTE::#{color.upcase}_100" + value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_100]" } %>
@@ -62,7 +62,7 @@ <%= sage_component SageCopyButton, { borderless: true, css_classes: "colors__copy-btn", - value: "SageTokens::COLOR_PALETTE::#{color.upcase}_200" + value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_200]" } %>
@@ -100,7 +100,7 @@ <%= sage_component SageCopyButton, { borderless: true, css_classes: "colors__copy-btn", - value: "SageTokens::COLOR_PALETTE::#{color.upcase}_300" + value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_300]" } %>
@@ -138,7 +138,7 @@ <%= sage_component SageCopyButton, { borderless: true, css_classes: "colors__copy-btn", - value: "SageTokens::COLOR_PALETTE::#{color.upcase}_400" + value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_400]" } %>
@@ -176,7 +176,7 @@ <%= sage_component SageCopyButton, { borderless: true, css_classes: "colors__copy-btn", - value: "SageTokens::COLOR_PALETTE::#{color.upcase}_500" + value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_500]" } %>
diff --git a/docs/app/views/pages/_color_values_base.html.erb b/docs/app/views/pages/_color_values_base.html.erb index 947971380e..bebc32d0dc 100644 --- a/docs/app/views/pages/_color_values_base.html.erb +++ b/docs/app/views/pages/_color_values_base.html.erb @@ -24,7 +24,7 @@ <%= sage_component SageCopyButton, { borderless: true, css_classes: "colors__copy-btn", - value: "SageTokens::COLOR_PALETTE::#{color.upcase}" + value: "SageTokens::COLOR_PALETTE[:#{color.upcase}]" } %>
diff --git a/docs/app/views/pages/_color_values_neutral.html.erb b/docs/app/views/pages/_color_values_neutral.html.erb index 3f39b74d32..0c39255dd8 100644 --- a/docs/app/views/pages/_color_values_neutral.html.erb +++ b/docs/app/views/pages/_color_values_neutral.html.erb @@ -25,7 +25,7 @@ <%= sage_component SageCopyButton, { borderless: true, css_classes: "colors__copy-btn", - value: "SageTokens::COLOR_PALETTE::#{color.upcase}_#{i}00" + value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_#{i}00]" } %>
From d672b2a15b7c7275131203feea56518df4b44a2b Mon Sep 17 00:00:00 2001 From: Julian Skinner Date: Tue, 26 Sep 2023 13:47:16 -0500 Subject: [PATCH 5/5] fix(react-input): allow ref to be forwarded to component --- packages/sage-react/lib/Input/Input.jsx | 7 +++-- packages/sage-react/lib/Input/Input.story.jsx | 30 +++++++++++++++++++ 2 files changed, 34 insertions(+), 3 deletions(-) diff --git a/packages/sage-react/lib/Input/Input.jsx b/packages/sage-react/lib/Input/Input.jsx index 6deb621998..7c088dcdcd 100644 --- a/packages/sage-react/lib/Input/Input.jsx +++ b/packages/sage-react/lib/Input/Input.jsx @@ -8,7 +8,7 @@ import { INPUT_TYPE } from './configs'; -export const Input = ({ +export const Input = React.forwardRef(({ autocomplete, className, disabled, @@ -38,7 +38,7 @@ export const Input = ({ suffix, value, ...rest -}) => { +}, ref) => { const inputPaddingOffset = 16; const [fieldValue, updateFieldValue] = useState(null); const [inputStyles, updateStyles] = useState(rest.style || {}); @@ -123,6 +123,7 @@ export const Input = ({ pattern={pattern} placeholder={setPlaceholder()} readOnly={readonly} + ref={ref} required={required} step={step} style={inputStyles} @@ -165,7 +166,7 @@ export const Input = ({ {popover}
); -}; +}); Input.Mode = INPUT_MODE; Input.Type = INPUT_TYPE; diff --git a/packages/sage-react/lib/Input/Input.story.jsx b/packages/sage-react/lib/Input/Input.story.jsx index efb64e673e..b29edf1c46 100644 --- a/packages/sage-react/lib/Input/Input.story.jsx +++ b/packages/sage-react/lib/Input/Input.story.jsx @@ -144,6 +144,36 @@ export const InputWithPopover = (args) => { ); }; +const FocusTemplate = (args) => { + const [value, updateValue] = useState(args.value); + const onChange = (e) => { + updateValue(e.target.value); + }; + + const onFocus = () => { + console.log('Has Focus!!!!'); + }; + + const inputRef = React.useRef(null); + + React.useEffect(() => { + if (inputRef.current) { + inputRef.current.focus(); + } + }, []); + + return ( + + ); +}; + +export const InputFocusTest = FocusTemplate.bind({}); +InputFocusTest.args = { + inputType: Input.Type.EMAIL, + label: 'Email address', + id: 'field-focus', +}; + Default.args = { id: 'field-1', message: 'this is a test message',