Docs(web-react, web-twig): Add DocsStack component

- Created new `DocsStack` component and use it in `DocsSection` component for both web-react and web-twig
lmc-eu · Sep 14, 2023 · a52215d · a52215d
1 parent 340613d
commit a52215d
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 6 deletions.
diff --git a/packages/web-react/docs/DocsSections.tsx b/packages/web-react/docs/DocsSections.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { Tag } from '../src/components';
+import DocsStack from './DocsStack';
 
 interface DocsSectionProps {
   children: ReactNode;
@@ -19,7 +20,7 @@ const DocsSection = ({ children, hasStack = true, stackAlignment = 'start', titl
         </Tag>
       )}
     </h2>
-    {hasStack ? <div className={`docs-Stack docs-Stack--${stackAlignment}`}>{children}</div> : children}
+    {hasStack ? <DocsStack stackAlignment={stackAlignment}>{children}</DocsStack> : children}
   </section>
 );
 

diff --git a/packages/web-react/docs/DocsStack.tsx b/packages/web-react/docs/DocsStack.tsx
@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+
+interface DocsStackProps {
+  children: ReactNode;
+  stackAlignment?: 'start' | 'center' | 'end';
+}
+
+const DocsStack = ({ children, stackAlignment }: DocsStackProps) => {
+  const alignmentClass = stackAlignment ? `docs-Stack--${stackAlignment}` : '';
+
+  return <div className={`docs-Stack ${alignmentClass}`}>{children}</div>;
+};
+
+DocsStack.defaultProps = {
+  stackAlignment: '',
+};
+
+export default DocsStack;
diff --git a/packages/web-twig/docs/components/DocsSection/DocsSection.twig b/packages/web-twig/docs/components/DocsSection/DocsSection.twig
@@ -8,13 +8,10 @@
 {# Class names #}
 {%- set _rootClassName = 'docs-Section' -%}
 {%- set _headingClassName = 'docs-Heading' -%}
-{%- set _stackClassName = 'docs-Stack' -%}
-{%- set _stackAlignmentClassName = 'docs-Stack--' ~ _stackAlignment -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _rootClassNames = [_rootClassName, _styleProps.className] -%}
-{%- set _stackClassNames = [_stackClassName, _stackAlignmentClassName] -%}
 
 {%- set _renderedContent %}
     {% block content %}{% endblock %}
@@ -32,9 +29,9 @@
         {% endif %}
     </h2>
     {% if _hasStack %}
-        <div {{ classProp(_stackClassNames) }}>
+        <DocsStack stackAlignment={{ _stackAlignment }}>
             {{ _renderedContent }}
-        </div>
+        </DocsStack>
     {% else %}
         {{ _renderedContent }}
     {% endif %}

diff --git a/packages/web-twig/docs/components/DocsStack/DocsStack.twig b/packages/web-twig/docs/components/DocsStack/DocsStack.twig
@@ -0,0 +1,19 @@
+{# API #}
+{%- set props = props | default([]) -%}
+{%- set _stackAlignment = props.stackAlignment | default('') -%}
+
+{# Class names #}
+{%- set _rootClassName = 'docs-Stack' -%}
+{%- set _rootSizeClassName = _stackAlignment ? 'docs-Stack--' ~ _stackAlignment : '' -%}
+
+{# Miscellaneous #}
+{%- set _styleProps = useStyleProps(props) -%}
+{%- set _rootClassNames = [_rootClassName, _rootSizeClassName, _styleProps.className] -%}
+
+<div
+    {{ mainProps(props) }}
+    {{ styleProp(_styleProps) }}
+    {{ classProp(_rootClassNames) }}
+>
+    {% block content %}{% endblock %}
+</div>
diff --git a/packages/web-twig/docs/components/DocsStack/__tests__/DocsStackSnapshotTest.php b/packages/web-twig/docs/components/DocsStack/__tests__/DocsStackSnapshotTest.php
@@ -0,0 +1,11 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Lmc\SpiritWebTwigBundle\Resources\components\DocsStack;
+
+use Lmc\SpiritWebTwigBundle\AbstractComponentSnapshotTest;
+
+class DocsStackSnapshotTest extends AbstractComponentSnapshotTest
+{
+}
diff --git a/packages/web-twig/docs/components/DocsStack/__tests__/__fixtures__/docsStackDefault.twig b/packages/web-twig/docs/components/DocsStack/__tests__/__fixtures__/docsStackDefault.twig
@@ -0,0 +1,7 @@
+<DocsStack />
+
+<!-- Render with content -->
+<DocsStack>my content</DocsStack>
+
+<!-- Render with all props -->
+<DocsStack stackAlignment="start">my content</DocsStack>
diff --git a/...eb-twig/docs/components/DocsStack/__tests__/__snapshots__/docsStackDefault.twig.snap.html b/...eb-twig/docs/components/DocsStack/__tests__/__snapshots__/docsStackDefault.twig.snap.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+    </title>
+  </head>
+  <body>
+    <div class="docs-Stack">
+    </div>
+    <!-- Render with content -->
+
+    <div class="docs-Stack">
+      my content
+    </div>
+    <!-- Render with all props -->
+
+    <div class="docs-Stack docs-Stack--start">
+      my content
+    </div>
+  </body>
+</html>
diff --git a/packages/web-twig/docs/twig-components/docsStack.twig b/packages/web-twig/docs/twig-components/docsStack.twig
@@ -0,0 +1 @@
+{% extends '@spirit/DocsStack/DocsStack.twig' %}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{% extends '@spirit/DocsStack/DocsStack.twig' %}