feat: display headers

api-specs/test/api.raml

@@ -62,7 +62,7 @@ traits:
         type: string
         description: Accept application/json Header
         required: true
-        pattern: ^application/json$
+        pattern: application/json
         default: application/json
   frontastic-locale:
     headers:
@@ -523,24 +523,6 @@ traits:
               application/json:
                 type: object
                 example: !include examples/action-success.json
-      put:
-        is:
-          - action-errorable
-          - right-header
-          - frontastic-locale
-        description: Use the PUT method to write data to a backend system. Any JSON serializable payload is accepted. The following request example adds a product to a cart. For the response, we recommend to use standard HTTP codes and `application/json` encoded content. The response will be structured [as defined by the body property of the action](/../frontend-development/developing-an-action-extension#1-implement-the-action). The following response example contains the updated cart information, which includes the added product.
-        body:
-          application/json:
-            type: any
-            example: !include examples/action-payload.json
-        responses:
-          200:
-            description: The response will be structured [as defined by the body property of the action](/../frontend-development/developing-an-action-extension#1-implement-the-action). We recommend to use standard HTTP response codes and `application/json` encoded content. The following response example contains information about a cart.
-            body:
-              application/json:
-                type: object
-                example: !include examples/action-success.json
-
 
 #   /resourceWithHeaders:
 #    description: Tests use of specific headers.

packages/gatsby-theme-api-docs/src/components/resource/method/headers.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import SpacingsStack from '@commercetools-uikit/spacings-stack';
+import SpacingsInline from '@commercetools-uikit/spacings-inline';
+import {
+  designSystem,
+  markdownFragmentToReact,
+} from '@commercetools-docs/ui-kit';
+
+const HeaderListContainer = styled.div`
+  padding: 0 ${designSystem.dimensions.spacings.l};
+`;
+
+const HeaderListItem = styled.li`
+  padding: ${designSystem.dimensions.spacings.xs} 0px;
+`;
+
+const highlightHeader = (header) => `\`${header}\``;
+
+const Headers = (props) => {
+  return (
+    <SpacingsStack scale="xs">
+      <div>Headers:</div>
+      <HeaderListContainer>
+        <ul>
+          {props.headers.map((header, itemImdex) => {
+            console.log(header);
+            return (
+              <HeaderListItem key={itemImdex}>
+                <SpacingsInline scale="xs">
+                  {markdownFragmentToReact(highlightHeader(header.header))}
+                  {header.required && <p>-</p>}
+                  {header.required && <p>Required</p>}
+                </SpacingsInline>
+              </HeaderListItem>
+            );
+          })}
+        </ul>
+      </HeaderListContainer>
+    </SpacingsStack>
+  );
+};
+
+Headers.propTypes = {
+  headers: PropTypes.arrayOf(
+    PropTypes.shape({
+      header: PropTypes.string.isRequired,
+      builtinType: PropTypes.string,
+      description: PropTypes.string,
+      type: PropTypes.string,
+      required: PropTypes.bool,
+      pattern: PropTypes.string,
+    })
+  ).isRequired,
+};
+
+export default Headers;

packages/gatsby-theme-api-docs/src/components/resource/method/method.js

@@ -13,6 +13,7 @@ import Url from './url';
 import Scopes from './scopes';
 import Responses from './responses';
 import Parameters from './parameters';
+import Headers from './headers';
 import QueryParameters from './query-parameters';
 import RequestRepresentation from './request-representation';
 import { DescriptionParagraph } from '../../description';
@@ -121,6 +122,8 @@ const Method = ({
                 <Scopes scopes={method.securedBy[0].oauth_2_0.scopes} />
               )}
 
+              {method.headers && <Headers headers={method.headers} />}
+
               {allUriParameters.length > 0 && (
                 <Parameters
                   title={'Path parameters'}