Release 0.8.0 (#105)

* Release 0.8.0 * Table: add breakpoints (#106) * IconButton + CopyText updates (#107) * Icon button: add label + preset * CopyText: update to use IconButton copy preset * Checkbox: add note and error (#108) * Checkbox: add note and error * Update prop description * Toggle: settings example (#112) * Update dependencies GitHub Action (#110) * Textarea component (#109) * Textarea component * Update props description
stellar · Mar 10, 2022 · 1345794 · 1345794
1 parent 6539aad
commit 1345794
Show file tree

Hide file tree

Showing 26 changed files with 559 additions and 95 deletions.
diff --git a/.github/workflows/update_deps.yml b/.github/workflows/update_deps.yml
@@ -1,8 +1,8 @@
 name: Monthly dependency updates
 on:
   schedule:
-    # First of every month
-    - cron: 0 0 1 * *
+    # First of every other month
+    - cron: 0 0 1 */2 *
 
 jobs:
   create_issue:
@@ -22,6 +22,7 @@ jobs:
             ```
             Make sure there are no issues in the code editor, code compiles, and it runs without issues in the browser.
           pinned: false
-          close-previous: false
+          close-previous: true
+          labels: "design-system, dependencies"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
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.7.0",
+    "@stellar/design-system": "^0.8.0",
     "lodash": "^4.17.21",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.2",

diff --git a/@stellar/design-system-website/src/components/Details/styles.scss b/@stellar/design-system-website/src/components/Details/styles.scss
@@ -35,10 +35,6 @@
       justify-content: flex-start;
       align-items: center;
       flex-wrap: wrap;
-
-      .TableContainer .Table {
-        --table-min-width: 400px;
-      }
     }
 
     &__code {

diff --git a/@stellar/design-system-website/src/constants/componentDetails.ts b/@stellar/design-system-website/src/constants/componentDetails.ts
@@ -21,6 +21,7 @@ import { selects } from "constants/details/selects";
 import { statusBars } from "constants/details/statusBars";
 import { tables } from "constants/details/tables";
 import { tags } from "constants/details/tags";
+import { textareas } from "constants/details/textareas";
 import { textLinks } from "constants/details/textLinks";
 import { toggles } from "constants/details/toggles";
 import { tooltips } from "constants/details/tooltips";
@@ -51,6 +52,7 @@ export const componentDetails: ComponentDetailsList = {
   statusBars,
   tables,
   tags,
+  textareas,
   textLinks,
   toggles,
   tooltips,

diff --git a/@stellar/design-system-website/src/constants/componentsInDisplayOrder.ts b/@stellar/design-system-website/src/constants/componentsInDisplayOrder.ts
@@ -62,6 +62,10 @@ export const componentsInDisplayOrder: ComponentsInDisplayOrder[] = [
     id: ComponentDetailsId.selects,
     label: "Selects",
   },
+  {
+    id: ComponentDetailsId.textareas,
+    label: "Textareas",
+  },
   {
     id: ComponentDetailsId.checkboxes,
     label: "Checkboxes",

diff --git a/@stellar/design-system-website/src/constants/details/checkboxes.tsx b/@stellar/design-system-website/src/constants/details/checkboxes.tsx
@@ -50,6 +50,22 @@ export const checkboxes: ComponentDetails = {
         />,
       ],
     },
+    {
+      title: "Checkbox with note / error",
+      description: "",
+      component: [
+        <Checkbox
+          id="checkbox-7"
+          label="Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia reprehenderit ipsam facilis"
+          note="Note message"
+        />,
+        <Checkbox
+          id="checkbox-8"
+          label="Illum odio veritatis corporis nihil asperiores eum nam in error"
+          error="Error message"
+        />,
+      ],
+    },
   ],
   props: [
     {
@@ -66,6 +82,20 @@ export const checkboxes: ComponentDetails = {
       optional: true,
       description: "Label of the checkbox",
     },
+    {
+      prop: "note",
+      type: ["string", "ReactNode"],
+      default: null,
+      optional: true,
+      description: "Note message of the checkbox",
+    },
+    {
+      prop: "error",
+      type: ["string", "ReactNode"],
+      default: null,
+      optional: true,
+      description: "Error message of the checkbox",
+    },
   ],
   externalProps: {
     link: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes",

diff --git a/@stellar/design-system-website/src/constants/details/copyTexts.tsx b/@stellar/design-system-website/src/constants/details/copyTexts.tsx
@@ -1,4 +1,4 @@
-import { CopyText, TextLink } from "@stellar/design-system";
+import { CopyText, TextLink, IconButton } from "@stellar/design-system";
 import { ComponentDetails, ComponentDetailsId } from "types/types.d";
 
 export const copyTexts: ComponentDetails = {
@@ -32,16 +32,18 @@ export const copyTexts: ComponentDetails = {
       ],
     },
     {
-      title: "With copy icon",
+      title: "Using Icon button copy preset",
       description: "Text link with copy icon and tooltip",
       component: [
         <CopyText
           textToCopy="Test copy"
-          showCopyIcon
           showTooltip
           tooltipPosition={CopyText.tooltipPosition.RIGHT}
         >
-          <TextLink>Copy</TextLink>
+          <IconButton
+            preset={IconButton.preset.copy}
+            variant={IconButton.variant.highlight}
+          />
         </CopyText>,
       ],
     },
@@ -54,13 +56,6 @@ export const copyTexts: ComponentDetails = {
       optional: false,
       description: "Text to copy",
     },
-    {
-      prop: "showCopyIcon",
-      type: ["boolean"],
-      default: null,
-      optional: true,
-      description: "Flag to enable copy icon",
-    },
     {
       prop: "showTooltip",
       type: ["boolean"],

diff --git a/@stellar/design-system-website/src/constants/details/iconButtons.tsx b/@stellar/design-system-website/src/constants/details/iconButtons.tsx
@@ -9,7 +9,8 @@ export const iconButtons: ComponentDetails = {
       <code>IconButton</code> is similar to the <code>Button</code>, and is used
       to trigger an action. There are five variants (color is the only
       difference): <code>default</code>, <code>error</code>,{" "}
-      <code>success</code>, <code>warning</code>, <code>highlight</code>.
+      <code>success</code>, <code>warning</code>, <code>highlight</code>; and
+      two presets: <code>copy</code> and <code>download</code>.
     </>
   ),
   shortDescription: "Similar to the Button, and is used to trigger an action",
@@ -22,6 +23,19 @@ export const iconButtons: ComponentDetails = {
         <IconButton icon={<Icon.Info />} altText="Default" disabled />,
       ],
     },
+    {
+      title: "Default with label",
+      description: "",
+      component: [
+        <IconButton icon={<Icon.Info />} label="Default" altText="Default" />,
+        <IconButton
+          icon={<Icon.Info />}
+          label="Default"
+          altText="Default"
+          disabled
+        />,
+      ],
+    },
     {
       title: "Success",
       description: "",
@@ -90,6 +104,36 @@ export const iconButtons: ComponentDetails = {
         />,
       ],
     },
+    {
+      title: "Preset: copy",
+      description: "",
+      component: [
+        <IconButton
+          preset={IconButton.preset.copy}
+          variant={IconButton.variant.highlight}
+        />,
+        <IconButton
+          preset={IconButton.preset.copy}
+          variant={IconButton.variant.highlight}
+          disabled
+        />,
+      ],
+    },
+    {
+      title: "Preset: download",
+      description: "",
+      component: [
+        <IconButton
+          preset={IconButton.preset.download}
+          variant={IconButton.variant.highlight}
+        />,
+        <IconButton
+          preset={IconButton.preset.download}
+          variant={IconButton.variant.highlight}
+          disabled
+        />,
+      ],
+    },
     {
       title: "Custom color",
       description: "",
@@ -124,8 +168,34 @@ export const iconButtons: ComponentDetails = {
         />,
       ],
     },
+    {
+      title: "Custom size with label",
+      description: "",
+      component: [
+        <IconButton
+          icon={<Icon.Info />}
+          altText="Custom size"
+          label="Custom"
+          customSize="2rem"
+        />,
+        <IconButton
+          icon={<Icon.Info />}
+          altText="Custom size"
+          label="Custom"
+          customSize="2rem"
+          disabled
+        />,
+      ],
+    },
   ],
   props: [
+    {
+      prop: "IconButtonDefaultProps",
+      type: [],
+      default: null,
+      optional: false,
+      description: "",
+    },
     {
       prop: "icon",
       type: ["ReactNode"],
@@ -140,13 +210,41 @@ export const iconButtons: ComponentDetails = {
       optional: false,
       description: "Alternative text to show on hover",
     },
+    {
+      prop: "IconButtonPresetProps",
+      type: [],
+      default: null,
+      optional: false,
+      description: "",
+    },
+    {
+      prop: "preset",
+      type: ["copy", "download"],
+      default: null,
+      optional: false,
+      description: "Predefined set of icon buttons",
+    },
+    {
+      prop: "IconButtonBaseProps",
+      type: [],
+      default: null,
+      optional: false,
+      description: "",
+    },
     {
       prop: "variant",
       type: ["default", "error", "success", "warning", "highlight"],
       default: "default",
       optional: true,
       description: "Variant of the component",
     },
+    {
+      prop: "label",
+      type: ["string"],
+      default: null,
+      optional: true,
+      description: "Component label",
+    },
     {
       prop: "customColor",
       type: ["string"],

diff --git a/@stellar/design-system-website/src/constants/details/mocks.tsx b/@stellar/design-system-website/src/constants/details/mocks.tsx
@@ -1,2 +1,4 @@
 // used to illustrate a Formik <Field /> in examples
 export const Field = (props: any) => <input {...props} />;
+
+export const TextareaField = (props: any) => <textarea {...props} />;
diff --git a/@stellar/design-system-website/src/constants/details/tables.tsx b/@stellar/design-system-website/src/constants/details/tables.tsx
@@ -84,6 +84,7 @@ export const tables: ComponentDetails = {
           data={tableData}
           renderItemRow={renderItemRow}
           hideNumberColumn
+          breakpoint={400}
         />,
       ],
     },
@@ -96,6 +97,7 @@ export const tables: ComponentDetails = {
           data={tableData}
           renderItemRow={renderItemRow}
           pageSize={2}
+          breakpoint={400}
         />,
       ],
     },
@@ -108,6 +110,7 @@ export const tables: ComponentDetails = {
           data={tableData}
           renderItemRow={renderItemRow}
           pageSize={2}
+          breakpoint={400}
           isLoading
         />,
       ],
@@ -120,6 +123,7 @@ export const tables: ComponentDetails = {
           columnLabels={sortableTableLabels}
           data={[]}
           renderItemRow={renderItemRow}
+          breakpoint={400}
         />,
       ],
     },
@@ -153,6 +157,13 @@ export const tables: ComponentDetails = {
       optional: false,
       description: "Function to render table rows",
     },
+    {
+      prop: "breakpoint",
+      type: ["300", "400", "500", "600", "700", "800", "900"],
+      default: null,
+      optional: false,
+      description: "Media query breakpoint to show sticky column layout",
+    },
     {
       prop: "hideNumberColumn",
       type: ["boolean"],