From 07dcd2e434b6087f7cb73ca3948ca4e5cff406a1 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 7 Mar 2024 14:47:55 +0000
Subject: [PATCH] chore: bump version to v4.1.1 (#54)

* [create-pull-request] automated change

* chore: adds docs to 4.1.1

---------

Co-authored-by: willmcvay <willmcvay@users.noreply.github.com>
Co-authored-by: Will McVay <wmcvay@reapit.com>
---
 package.json                             |  2 +-
 src/components/layout/layout.mdx         | 19 +++++++++++--------
 src/components/layout/layout.stories.tsx | 12 ++++++++++++
 src/storybook/changelog.mdx              |  5 +++++
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 1d8d9bf1..ee7546bf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reapit/elements",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "A collection of React components and utilities for building apps for Reapit Marketplace",
   "homepage": "https://github.com/reapit/elements#readme",
   "bugs": {
diff --git a/src/components/layout/layout.mdx b/src/components/layout/layout.mdx
index f4872948..6fe0737e 100644
--- a/src/components/layout/layout.mdx
+++ b/src/components/layout/layout.mdx
@@ -61,6 +61,14 @@ The previous two containers are postioned using the `FlexContainer` component. T
 
 <RenderHtmlMarkup of={LayoutStories.FlexContainerUsage} />
 
+## Semantic Layout
+
+Layout elements with semantic tags passed via the tag prop.
+
+<Canvas of={LayoutStories.TaggedLayouts} />
+
+<RenderHtmlMarkup of={LayoutStories.TaggedLayouts} />
+
 ## Combined Container Components
 
 In this example you can see the `MainContainer` component - used to wrap the whole application and will handle the `Nav` and main content positioning.
@@ -83,17 +91,12 @@ For a complete example of how to lay out a page, see below where we have combine
 
 <Canvas of={LayoutStories.CompleteCombinedExample} />
 
-{/* // <RenderHtmlMarkup
-//   component="Layouts"
-//   story="Complete Combined Example"
-// />  */}
+<RenderHtmlMarkup of={LayoutStories.CompleteCombinedExample} />
 
-{/* ## Combined Layout Max Width
+## Combined Layout Max Width
 
 Variant on the complete layout but using a max width container in desktop, a side column and no secondary nav.
 
 <Canvas of={LayoutStories.CompleteCombinedExampleMaxWidth} />
 
-<RenderHtmlMarkup
-  of={LayoutStories.CompleteCombinedExampleMaxWidth}
-/> */}
+<RenderHtmlMarkup of={LayoutStories.CompleteCombinedExampleMaxWidth} />
diff --git a/src/components/layout/layout.stories.tsx b/src/components/layout/layout.stories.tsx
index cf497912..a111bc43 100644
--- a/src/components/layout/layout.stories.tsx
+++ b/src/components/layout/layout.stories.tsx
@@ -91,6 +91,18 @@ export const FlexContainerUsage = {
   ),
 }
 
+export const TaggedLayouts = {
+  render: ({}) => (
+    <>
+      <MainContainer tag="main">
+        <FlexContainer tag="section" isFlexGrow1>
+          <PageContainer tag="aside">These containers all have semanitic tags I passed as a prop</PageContainer>
+        </FlexContainer>
+      </MainContainer>
+    </>
+  ),
+}
+
 export const CombinedContainerComponents = {
   render: ({}) => (
     <MainContainer>
diff --git a/src/storybook/changelog.mdx b/src/storybook/changelog.mdx
index 935fad09..dff6a137 100644
--- a/src/storybook/changelog.mdx
+++ b/src/storybook/changelog.mdx
@@ -16,7 +16,12 @@ We will publish release version history and changes here. Where possible, we wil
 
 Beta versions should be relatively stable but subject to occssional breaking changes.
 
+### **4.1.2 - 07/03/24**
+
+- Added docs for layout stories missed at past release
+
 ### **4.1.1 - 06/03/24**
+
 - Added optional `tag` property to layout components and typography
 - Changed breadcrumbs and accordion items to use anchors