Release/0.7.0 (#98)

* Table: allow ReactNode as table column label (#97) * add customInputs (#95) Co-authored-by: Iveta <[email protected]>
stellar · Feb 28, 2022 · 6539aad · 6539aad
1 parent 2b4efff
commit 6539aad
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 31 deletions.
diff --git a/@stellar/design-system-website/package.json b/@stellar/design-system-website/package.json
@@ -13,7 +13,7 @@
     "lint-tsc": "tsc --noEmit"
   },
   "dependencies": {
-    "@stellar/design-system": "^0.6.0",
+    "@stellar/design-system": "^0.7.0",
     "lodash": "^4.17.21",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.2",

diff --git a/@stellar/design-system-website/src/constants/details/inputs.tsx b/@stellar/design-system-website/src/constants/details/inputs.tsx
@@ -1,6 +1,8 @@
 import { Input, IconButton, Icon } from "@stellar/design-system";
 import { ComponentDetails, ComponentDetailsId } from "types/types.d";
 
+import { Field } from "./mocks";
+
 export const inputs: ComponentDetails = {
   id: ComponentDetailsId.inputs,
   title: "Inputs",
@@ -88,6 +90,18 @@ export const inputs: ComponentDetails = {
         />,
       ],
     },
+    {
+      title: "Input with custom input",
+      description: "",
+      component: [
+        <Input
+          customInput={<Field />}
+          id="input-12"
+          label="Label"
+          placeholder="Placeholder"
+        />,
+      ],
+    },
   ],
   props: [
     {
@@ -132,6 +146,14 @@ export const inputs: ComponentDetails = {
       optional: true,
       description: "Error message of the input",
     },
+    {
+      prop: "customInput",
+      type: ["React.ReactNode"],
+      default: null,
+      optional: true,
+      description:
+        "Use a specific input rather than a generic HTML input (useful for Formik or otherwise controlled inputs)",
+    },
   ],
   externalProps: {
     link: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes",

diff --git a/@stellar/design-system-website/src/constants/details/mocks.tsx b/@stellar/design-system-website/src/constants/details/mocks.tsx
@@ -0,0 +1,2 @@
+// used to illustrate a Formik <Field /> in examples
+export const Field = (props: any) => <input {...props} />;
diff --git a/@stellar/design-system-website/src/constants/details/tables.tsx b/@stellar/design-system-website/src/constants/details/tables.tsx
@@ -197,7 +197,7 @@ export const tables: ComponentDetails = {
     },
     {
       prop: "label",
-      type: ["string"],
+      type: ["string", "ReactNode"],
       default: null,
       optional: false,
       description: "Column label",

diff --git a/@stellar/design-system-website/src/constants/details/toggles.tsx b/@stellar/design-system-website/src/constants/details/toggles.tsx
@@ -1,6 +1,8 @@
 import { Toggle } from "@stellar/design-system";
 import { ComponentDetails, ComponentDetailsId } from "types/types.d";
 
+import { Field } from "./mocks";
+
 export const toggles: ComponentDetails = {
   id: ComponentDetailsId.toggles,
   title: "Toggles",
@@ -16,24 +18,42 @@ export const toggles: ComponentDetails = {
       title: "Default",
       description: "",
       component: [
-        <Toggle id="toggle-1" checked={false} onChange={() => {
-          // do nothing
-        }} />,
-        <Toggle id="toggle-2" checked={false} onChange={() => {
-          // do nothing
-        }} disabled />,
+        <Toggle
+          id="toggle-1"
+          checked={false}
+          onChange={() => {
+            // do nothing
+          }}
+        />,
+        <Toggle
+          id="toggle-2"
+          checked={false}
+          onChange={() => {
+            // do nothing
+          }}
+          disabled
+        />,
       ],
     },
     {
       title: "Toggle on",
       description: "",
       component: [
-        <Toggle id="toggle-3" checked={true} onChange={() => {
-          // do nothing
-        }} />,
-        <Toggle id="toggle-4" checked={true} onChange={() => {
-          // do nothing
-        }} disabled />,
+        <Toggle
+          id="toggle-3"
+          checked={true}
+          onChange={() => {
+            // do nothing
+          }}
+        />,
+        <Toggle
+          id="toggle-4"
+          checked={true}
+          onChange={() => {
+            // do nothing
+          }}
+          disabled
+        />,
       ],
     },
     {
@@ -140,6 +160,13 @@ export const toggles: ComponentDetails = {
         />,
       ],
     },
+    {
+      title: "Toggle with custom input",
+      description: "",
+      component: [
+        <Toggle customInput={<Field />} checked={true} id="toggle-13" />,
+      ],
+    },
   ],
   props: [
     {
@@ -191,6 +218,14 @@ export const toggles: ComponentDetails = {
       optional: true,
       description: "Position of the label",
     },
+    {
+      prop: "customInput",
+      type: ["React.ReactNode"],
+      default: null,
+      optional: true,
+      description:
+        "Use a specific input rather than a generic HTML input (useful for Formik or otherwise controlled inputs)",
+    },
   ],
   externalProps: {
     link: "",

diff --git a/@stellar/design-system-website/src/generated/gitInfo.ts b/@stellar/design-system-website/src/generated/gitInfo.ts
@@ -1 +1 @@
-export default { commitHash: "f86f428" };
+export default { commitHash: "2b4efff" };
diff --git a/@stellar/design-system/package.json b/@stellar/design-system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stellar/design-system",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "author": "Stellar Development Foundation <[email protected]>",
   "description": "Components for Stellar Development Foundation’s design system",
   "license": "Apache-2.0",

diff --git a/@stellar/design-system/src/components/Input/index.tsx b/@stellar/design-system/src/components/Input/index.tsx
@@ -1,9 +1,10 @@
-import React from "react";
+import React, { cloneElement } from "react";
 import { FieldElement } from "../utils/FieldElement";
 import { FieldNote } from "../utils/FieldNote";
 import "./styles.scss";
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  customInput?: React.ReactElement;
   id: string;
   label?: string | React.ReactNode;
   leftElement?: string | React.ReactNode;
@@ -13,6 +14,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 
 export const Input: React.FC<InputProps> = ({
+  customInput,
   id,
   label,
   leftElement,
@@ -26,6 +28,11 @@ export const Input: React.FC<InputProps> = ({
     ...(error ? ["Input--error"] : []),
   ].join(" ");
 
+  const baseInputProps = {
+    id,
+    "aria-invalid": !!error,
+  };
+
   return (
     <div className={`Input ${additionalClasses}`}>
       {label && <label htmlFor={id}>{label}</label>}
@@ -38,7 +45,11 @@ export const Input: React.FC<InputProps> = ({
         )}
 
         <div className="Input__wrapper">
-          <input id={id} aria-invalid={!!error} {...props} />
+          {customInput ? (
+            cloneElement(customInput, { ...baseInputProps, ...props })
+          ) : (
+            <input {...baseInputProps} {...props} />
+          )}
         </div>
 
         {rightElement && (

diff --git a/@stellar/design-system/src/components/Table/index.tsx b/@stellar/design-system/src/components/Table/index.tsx
@@ -10,7 +10,7 @@ import "./styles.scss";
 
 interface TableColumnLabel {
   id: string;
-  label: string;
+  label: string | React.ReactNode;
   sortBy?: boolean;
 }
 

diff --git a/@stellar/design-system/src/components/Toggle/index.tsx b/@stellar/design-system/src/components/Toggle/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { cloneElement, useEffect, useState } from "react";
 import "./styles.scss";
 
 enum LabelPosition {
@@ -13,7 +13,8 @@ interface ToggleComponent {
 interface ToggleProps extends React.InputHTMLAttributes<HTMLInputElement> {
   id: string;
   checked: boolean;
-  onChange: () => void;
+  customInput?: React.ReactElement;
+  onChange?: () => void;
   disabled?: boolean;
   labelOn?: string;
   labelOff?: string;
@@ -23,6 +24,7 @@ interface ToggleProps extends React.InputHTMLAttributes<HTMLInputElement> {
 export const Toggle: React.FC<ToggleProps> & ToggleComponent = ({
   id,
   checked,
+  customInput,
   onChange,
   disabled,
   labelOn,
@@ -39,19 +41,25 @@ export const Toggle: React.FC<ToggleProps> & ToggleComponent = ({
     " ",
   );
 
-  const renderLabel = () => <span>{checked ? labelOn : labelOff}</span>;
+  const renderLabel = () =>
+    labelOn ? <span>{checked ? labelOn : labelOff ?? labelOn}</span> : null;
+
+  const baseInputProps = {
+    className: "Toggle__input",
+    type: "checkbox",
+    name: id,
+    id,
+    disabled,
+  };
 
   return (
     <label className={`Toggle ${additionalClasses}`} htmlFor={id}>
-      <input
-        className="Toggle__input"
-        type="checkbox"
-        name={id}
-        id={id}
-        checked={checkedValue}
-        onChange={onChange}
-        disabled={disabled}
-      />
+      {customInput ? (
+        cloneElement(customInput, { ...baseInputProps })
+      ) : (
+        <input checked={checkedValue} onChange={onChange} {...baseInputProps} />
+      )}
+
       {labelPosition === LabelPosition.left ? renderLabel() : null}
       <div className="Toggle__track" />
       {labelPosition === LabelPosition.right ? renderLabel() : null}