feat(ArgsTable): add prop for default expansion of args

storybookjs · Aug 5, 2020 · 61ee8b0 · 61ee8b0
1 parent ec08774
commit 61ee8b0
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 10 deletions.
diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.tsx
@@ -14,6 +14,7 @@ export interface ArgRowProps {
   updateArgs?: (args: Args) => void;
   compact?: boolean;
   expandable?: boolean;
+  initialExpandedArgs?: boolean;
 }
 
 const Name = styled.span({ fontWeight: 'bold' });
@@ -64,7 +65,7 @@ const StyledTd = styled.td<{ expandable: boolean }>(({ theme, expandable }) => (
 }));
 
 export const ArgRow: FC<ArgRowProps> = (props) => {
-  const { row, updateArgs, compact, expandable } = props;
+  const { row, updateArgs, compact, expandable, initialExpandedArgs } = props;
   const { name, description } = row;
   const table = (row.table || {}) as TableAnnotation;
   const type = table.type || row.type;
@@ -88,20 +89,20 @@ export const ArgRow: FC<ArgRowProps> = (props) => {
           {table.jsDocTags != null ? (
             <>
               <TypeWithJsDoc hasDescription={hasDescription}>
-                <ArgValue value={type} />
+                <ArgValue value={type} initialExpandedArgs={initialExpandedArgs} />
               </TypeWithJsDoc>
               <ArgJsDoc tags={table.jsDocTags} />
             </>
           ) : (
             <Type hasDescription={hasDescription}>
-              <ArgValue value={type} />
+              <ArgValue value={type} initialExpandedArgs={initialExpandedArgs} />
             </Type>
           )}
         </td>
       )}
       {compact ? null : (
         <td>
-          <ArgValue value={defaultValue} />
+          <ArgValue value={defaultValue} initialExpandedArgs={initialExpandedArgs} />
         </td>
       )}
       {updateArgs ? (

diff --git a/lib/components/src/blocks/ArgsTable/ArgValue.tsx b/lib/components/src/blocks/ArgsTable/ArgValue.tsx
@@ -9,6 +9,7 @@ import { codeCommon } from '../../typography/shared';
 
 interface ArgValueProps {
   value?: PropSummaryValue;
+  initialExpandedArgs?: boolean;
 }
 
 interface ArgTextProps {
@@ -17,6 +18,7 @@ interface ArgTextProps {
 
 interface ArgSummaryProps {
   value: PropSummaryValue;
+  initialExpandedArgs?: boolean;
 }
 
 const ITEMS_BEFORE_EXPANSION = 8;
@@ -117,11 +119,11 @@ const renderSummaryItems = (summaryItems: string[], isExpanded = true) => {
   return items.map((item) => <ArgText key={item} text={item === '' ? '""' : item} />);
 };
 
-const ArgSummary: FC<ArgSummaryProps> = ({ value }) => {
+const ArgSummary: FC<ArgSummaryProps> = ({ value, initialExpandedArgs }) => {
   const { summary, detail } = value;
 
   const [isOpen, setIsOpen] = useState(false);
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(initialExpandedArgs || false);
 
   if (summary === undefined || summary === null) return null;
   // summary is used for the default value
@@ -170,6 +172,10 @@ const ArgSummary: FC<ArgSummaryProps> = ({ value }) => {
   );
 };
 
-export const ArgValue: FC<ArgValueProps> = ({ value }) => {
-  return value == null ? <EmptyArg /> : <ArgSummary value={value} />;
+export const ArgValue: FC<ArgValueProps> = ({ value, initialExpandedArgs }) => {
+  return value == null ? (
+    <EmptyArg />
+  ) : (
+    <ArgSummary value={value} initialExpandedArgs={initialExpandedArgs} />
+  );
 };
diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx
@@ -23,6 +23,8 @@ const htmlElementSubsection = { subcategory: 'HTMLElement' };
 const stringType = ArgRow.String.args.row;
 const numberType = ArgRow.Number.args.row;
 
+const longEnumType = ArgRow.LongEnum.args.row;
+
 const Template = (args) => <ArgsTable {...args} />;
 
 export const Normal = Template.bind({});
@@ -129,3 +131,11 @@ Error.args = {
 
 export const Empty = Template.bind({});
 Empty.args = { rows: {} };
+
+export const WithDefaultExpandedArgs = Template.bind({});
+WithDefaultExpandedArgs.args = {
+  rows: {
+    longEnumType,
+  },
+  initialExpandedArgs: true,
+};
diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx
@@ -233,6 +233,7 @@ export interface ArgsTableRowProps {
   resetArgs?: (argNames?: string[]) => void;
   compact?: boolean;
   inAddonPanel?: boolean;
+  initialExpandedArgs?: boolean;
 }
 
 export interface ArgsTableErrorProps {
@@ -297,7 +298,15 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     );
   }
 
-  const { rows, args, updateArgs, resetArgs, compact, inAddonPanel } = props as ArgsTableRowProps;
+  const {
+    rows,
+    args,
+    updateArgs,
+    resetArgs,
+    compact,
+    inAddonPanel,
+    initialExpandedArgs,
+  } = props as ArgsTableRowProps;
 
   const groups = groupRows(pickBy(rows, (row) => !row?.table?.disable));
 
@@ -321,7 +330,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
   if (!compact) colSpan += 2;
   const expandable = Object.keys(groups.sections).length > 0;
 
-  const common = { updateArgs, compact, inAddonPanel };
+  const common = { updateArgs, compact, inAddonPanel, initialExpandedArgs };
   return (
     <ResetWrapper>
       <TableWrapper {...{ compact, inAddonPanel }} className="docblock-argstable">