Next version

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]"
           } %>
         </div>
         <div>
@@ -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]"
           } %>
         </div>
         <div>
@@ -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]"
           } %>
         </div>
         <div>
@@ -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]"
           } %>
         </div>
         <div>
@@ -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]"
           } %>
         </div>
         <div>

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}]"
           } %>
         </div>
         <div>

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]"
             } %>
           </div>
           <div>

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}
     </div>
   );
-};
+});
 Input.Mode = INPUT_MODE;
 Input.Type = INPUT_TYPE;
 

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 (
+    <Input {...args} onChange={onChange} value={value} onFocus={onFocus} ref={inputRef} />
+  );
+};
+
+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',

packages/sage-react/lib/Introduction.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PackageInfo from '../../../docs/package.json';
+
+export const Introduction = () => (
+  <div>
+    <h1>Welcome to the React Storybook for Sage!</h1>
+    <p>Sage is our source of truth, providing everything
+      you need to build the best experiences for all Kajabi entrepreneurs.
+    </p>
+    <br />
+    <h2>Recommended Components to Start With</h2>
+    <ul>
+      <li><strong><a href="/?path=/docs/sage-button--primary">Button</a></strong> - A versatile component, offering various styles.</li>
+      <li><strong><a href="/?path=/docs/sage-card--default">Card</a></strong> - Ideal for displaying content in a neat, organized manner.</li>
+      <li><strong><a href="/?path=/docs/sage-modal--default">Modal</a></strong> - Capture users attention with our highly customizable modal dialogs.</li>
+    </ul>
+    <br />
+    <p>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 at our internal channel for <a href="https://app.slack.com/client/T026K7YCY/C01A424HY8Y">Sage Support</a>.
+    </p>
+    <br />
+    <p>Happy coding! 🚀</p>
+    <br />
+    <h2>Version Information</h2>
+    <h3>{`v${PackageInfo.version}`}</h3>
+    <p><a href={`https://github.com/Kajabi/sage-lib/releases/tag/v${PackageInfo.version}`}>Change log</a> for {`v${PackageInfo.version}`}.</p>
+  </div>
+);

packages/sage-react/lib/Introduction.story.mdx

@@ -1,7 +1,6 @@
 import { Meta } from "@storybook/addon-docs";
+import { Introduction } from './Introduction';
 
-<Meta title="Introduction" />
+<Meta title="Welcome to Sage" />
 
-# Sage React Storybook
-
-Content coming soon!
+<Introduction />

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';