` or a `| `, these are handled automatically
+ * Note: the signature of the method is the same as a `map` function
*/
render: (
input: Readonly,
@@ -49,11 +65,25 @@ interface Props {
}[];
/**
- * a field name to key rows on
+ * String or method to calculate the `key` for each row
+ *
+ * When re-ordering rows (by sorting or any other means), this will ensure
+ * that DOM elements are reused correctly.
+ *
+ * Can be a string representing a field in `RowData` (inferred from `data` or
+ * included as a generic to `>`) or a function that takes the
+ * row data and returns a key
*/
keyOn: keyof RowShape | ((row: RowShape) => any);
}
+/**
+ * Tables provide a structure to data and a visual grid making it easier to see
+ * relationships and are one of the most useful tools and formats for organizing
+ * and communiting structured data.
+ *
+ * @see https://zpl.io/bAlrjJe
+ */
export function Table({
data,
density = "standard",
diff --git a/src/Table/table.story/alice-howell.png b/src/Table/table.stories/alice-howell.png
similarity index 100%
rename from src/Table/table.story/alice-howell.png
rename to src/Table/table.stories/alice-howell.png
diff --git a/src/Table/table.story/benjamin-lawrence.png b/src/Table/table.stories/benjamin-lawrence.png
similarity index 100%
rename from src/Table/table.story/benjamin-lawrence.png
rename to src/Table/table.stories/benjamin-lawrence.png
diff --git a/src/Table/table.story/cynthia-bowman.png b/src/Table/table.stories/cynthia-bowman.png
similarity index 100%
rename from src/Table/table.story/cynthia-bowman.png
rename to src/Table/table.stories/cynthia-bowman.png
diff --git a/src/Table/table.story/jeremy-griffin.png b/src/Table/table.stories/jeremy-griffin.png
similarity index 100%
rename from src/Table/table.story/jeremy-griffin.png
rename to src/Table/table.stories/jeremy-griffin.png
diff --git a/src/Table/table.story/jeremy-jacobs.png b/src/Table/table.stories/jeremy-jacobs.png
similarity index 100%
rename from src/Table/table.story/jeremy-jacobs.png
rename to src/Table/table.stories/jeremy-jacobs.png
diff --git a/src/TextField/TextField.stories.mdx b/src/TextField/TextField.stories.mdx
new file mode 100644
index 00000000..8d4904fe
--- /dev/null
+++ b/src/TextField/TextField.stories.mdx
@@ -0,0 +1,104 @@
+import { TextField } from "./TextField";
+import {
+ Description,
+ Meta,
+ Story,
+ Props,
+ Preview,
+} from "@storybook/addon-docs/blocks";
+import { IconShip2 } from "../icons/IconShip2";
+import { colors } from "../colors";
+
+export const SampleIcon = () => (
+
+);
+
+
+
+# TextField
+
+
+
+## Sizes
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Customizing Segments
+
+You can override the `input` render by providing a `React.ReactElement`. Props added by `TextField` will be merged with the props you provide and `className`s will be merged. You can use this to add any custom props you want passed to the `input` element.
+
+
+
+ }
+ />
+
+
+
+## Input states
+
+Inputs automatically handle their input states
+
+
+
+
+
+
+ } />
+
+
+ } />
+
+
+ }
+ value="Focused and typing"
+ />
+
+
+
+
+
+
+## Anatomy
+
+Anatomy of a complete form field. A label is required (or at the very least, it should be very clear why a label might not be needed). Description, placeholder text, and helper text are all optional.
+
+
+
+
+
+
+
+
+
+
+## Props
+
+
diff --git a/src/TextField/TextField.story.tsx b/src/TextField/TextField.story.tsx
deleted file mode 100644
index dcf32406..00000000
--- a/src/TextField/TextField.story.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-/** @jsx jsx */
-import { jsx, ClassNames } from "@emotion/core";
-import { storiesOf } from "@storybook/react";
-import { TextField } from "./TextField";
-import { DemoSection, DemoGroup, DemoGroupProps } from "../shared/DemoSection";
-import React, { ComponentProps } from "react";
-import { colors } from "../colors";
-import { IconSearch } from "../icons/IconSearch";
-
-const VerticalTextFieldGroup: React.FC<
- {
- inputProps?: Partial, "children">>;
- children: JSX.Element | JSX.Element[];
- } & DemoGroupProps
-> = ({ children, ...otherProps }) => (
-
- {React.Children.map(children, child => (
- {child}
- ))}
-
-);
-
-storiesOf("TextField", module).add("Catalog", () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {({ cx, css }) => (
-
- }
- placeholder="Placeholder text"
- label="Blue border input"
- />
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/** TODO: add input masking when it works (if it works?) */}
-
-
-
-
- }
- placeholder="Placeholder text"
- label="Resting"
- />
-
- }
- />
-
- }
- placeholder="Placeholder text"
- label="Focused"
- data-force-focus-state
- />
-
- }
- />
-
- }
- />
-
-
-
-));
diff --git a/src/colors/utils/getOffsetInPalette.ts b/src/colors/utils/getOffsetInPalette.ts
index c24edf10..22453e1a 100644
--- a/src/colors/utils/getOffsetInPalette.ts
+++ b/src/colors/utils/getOffsetInPalette.ts
@@ -18,7 +18,7 @@ const colorPaletteKeys: ReadonlyArray = [
function isColorPalette(
palette: MonochromePalette | ColorPalette
): palette is ColorPalette {
- return palette.hasOwnProperty("darkest");
+ return Object.prototype.hasOwnProperty.call(palette, "darkest");
}
/**
diff --git a/src/icons/Icons.story.jsx b/src/icons/Icons.story.jsx
index 53e6e403..627a7b43 100644
--- a/src/icons/Icons.story.jsx
+++ b/src/icons/Icons.story.jsx
@@ -1,6 +1,5 @@
import React from "react";
import { storiesOf } from "@storybook/react";
-import { withKnobs, select } from "@storybook/addon-knobs/react";
import { colors } from "../colors";
import camelcase from "camelcase";
import { Page } from "../../components-util/Page";
@@ -47,47 +46,67 @@ const groupedIcons = svgsReq.keys().reduce((map, fullname) => {
return map;
}, {});
-storiesOf("Icons", module)
- .addDecorator(withKnobs)
- .add("Catalog", () => {
- const color = select("Color", colorMap, colors.black.base);
- const weight = select("Weight", ["thin", "normal"], "normal");
+const StreamlineIndicator: React.FC = () => (
+
+ sl
+
+);
+
+/**
+ * Render all icons in columns and pass through props to each icon
+ */
+const AllIcons: React.FC = ({ color, ...otherProps }) =>
+ Object.entries(groupedIcons).map(([category, icons]) => (
+
+ {icons.map(({ basename, isStreamlineIcon, Component }) => (
+
+
+ {basename} {isStreamlineIcon && }
+
+
+
-
- {basename}{" "}
- {isStreamlineIcon && (
-
- sl
-
- )}
-
-
- |