change existing wrappers (#36)

change existing wrappers

Reviewed-by: Tino Schr

doc/source/examples/card_item.rst

@@ -0,0 +1,49 @@
+Card Item Test
+===================
+
+.. directive_wrapper::
+   :class: card-item-wrapper
+
+   .. card_item::
+      :title: Ansible
+      :image: ../_static/images/ansible.svg
+      :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
+
+      - OTC Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud
+      - Release Notes|https://docs.otc-service.com/ansible-collection-cloud
+      - Release Notes|https://docs.otc-service.com/ansible-collection-cloud
+
+   .. card_item::
+      :title: Ansible
+      :image: ../_static/images/ansible.svg
+      :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
+
+      - Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud
+
+   .. card_item::
+      :title: Ansible
+      :image: ../_static/images/ansible.svg
+      :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
+
+      - Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud
+
+   .. card_item::
+      :title: Ansible
+      :image: ../_static/images/ansible.svg
+      :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
+
+      - Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud
+
+   .. card_item::
+      :title: Ansible
+      :image: ../_static/images/ansible.svg
+      :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
+
+      - Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud
+
+   .. card_item::
+      :title: Ansible
+      :image: ../_static/images/ansible.svg
+      :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
+
+      - Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud

doc/source/examples/index.rst

@@ -9,5 +9,6 @@ Documentation Examples
    directives_ecs_internal
    directives_docsportal
    container_item
+   card_item
    service_navigator
    docs_link

otc_sphinx_directives/card_item.py

@@ -0,0 +1,108 @@
+# Licensed under the Apache License, Version 2.0 (the "License"); you may
+# not use this file except in compliance with the License. You may obtain
+# a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+# License for the specific language governing permissions and limitations
+# under the License.
+
+# Description:
+# The directive card_item can get 3 options.
+#
+# Options:
+#  - title: takes the Name of the linked item
+#  - image: takes the link to the picture in the static folder
+#  - external: if set, the link opens in a new tab
+#
+# Usage:
+# .. directive_wrapper::
+#    :class: card-item-wrapper
+#
+#    .. card_item::
+#       :title: Ansible
+#       :image: ../_static/images/ansible.svg
+#       :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
+#
+#       - OTC Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud
+#       - Release Notes|https://docs.otc-service.com/ansible-collection-cloud
+
+
+from docutils import nodes
+
+from docutils.parsers.rst import Directive
+from docutils.parsers.rst import directives
+from sphinx.util import logging
+
+LOG = logging.getLogger(__name__)
+
+
+class card_item(nodes.General, nodes.Element):
+    pass
+
+
+class CardItem(Directive):
+    node_class = card_item
+    option_spec = {
+        'title': directives.unchanged_required,
+        'image': directives.unchanged_required,
+        'external': directives.unchanged,
+        'description': directives.unchanged_required,
+    }
+
+    has_content = True
+
+    def run(self):
+        node = card_item()
+        node['title'] = self.options['title']
+        node['image'] = self.options['image']
+        node['description'] = self.options['description']
+        # Check, if 'external' is available in self.options and set the value for the node
+        node['external'] = 'external' in self.options
+        links = []
+        for ent in self.content:
+            _srv = ent.strip('- ')
+            data_parts = _srv.split("|")
+            title = data_parts[0]
+            href = data_parts[1] if len(data_parts) > 1 else '#'
+            links.append(
+                dict(
+                    title=title,
+                    href=href
+                )
+            )
+        node['links'] = links
+        return [node]
+
+
+def card_item_html(self, node):
+
+    data = f'''
+    <div class="card-item">
+        <div>
+            <img
+                style="width: 100%; max-height: 160px; margin: 0;"
+                src="{node['image']}"
+                alt="{node['title']}"
+            </img>
+            <div style="padding: 1rem;display: flex;flex-direction: column;">
+                <h4 style="margin: 0px 0 1rem 0; font: var(--telekom-text-style-heading-4);">{node['title']}</h4>
+                <div style="padding-bottom: 1rem;">
+                    {node['description']}
+                </div>
+    '''
+    for link in node['links']:
+        data += f'''
+                <a href="{link['href']}" class="link">{link['title']}</a>
+        '''
+
+    data += '''
+            </div>
+        </div>
+    </div>
+    '''
+    self.body.append(data)
+    raise nodes.SkipNode

otc_sphinx_directives/directive_wrapper.py

@@ -15,28 +15,33 @@
 from sphinx.util import logging
 from sphinx.util.docutils import SphinxDirective
 
-
 LOG = logging.getLogger(__name__)
 
 
 class directive_wrapper(nodes.General, nodes.Element):
 
     def __init__(self, text=None, **args):
         super(directive_wrapper, self).__init__()
+        self['class'] = ''
+        self['id'] = ''
+        self['style'] = ''
+        self['wrapper_type'] = 'div'
 
     @staticmethod
     def visit_div(self, node):
         options = ""
-        if node['id'] != '':
+        if node['id']:
             options += f'id="{node["id"]}" '
-        if node['class'] != '':
+        if node['class']:
             options += f'class="{node["class"]}" '
+        if node['style']:
+            options += f'style="{node["style"]}" '
 
         self.body.append(
             self.starttag(node, f'{node["wrapper_type"]} {options}'))
 
     @staticmethod
-    def depart_div(self, node=None):
+    def depart_div(self, node):
         self.body.append(f'</{node["wrapper_type"]}>\n')
 
 
@@ -45,28 +50,20 @@ class DirectiveWrapper(SphinxDirective):
     option_spec = {
         'class': directives.unchanged,
         'id': directives.unchanged,
-        'wrapper_type': directives.unchanged
+        'wrapper_type': directives.unchanged,
+        'style': directives.unchanged
     }
 
     has_content = True
 
     def run(self):
-
         text = '\n'.join(self.content)
         node = directive_wrapper(text)
-        if "class" in self.options.keys() and self.options["class"]:
-            node['class'] = self.options["class"]
-        else:
-            node['class'] = ''
-        if "id" in self.options.keys() and self.options["id"]:
-            node['id'] = self.options["id"]
-        else:
-            node['id'] = ""
-        if ("wrapper_type" in self.options.keys()
-                and self.options["wrapper_type"]):
-            node['wrapper_type'] = self.options["wrapper_type"]
-        else:
-            node['wrapper_type'] = "div"
+        node['class'] = self.options.get('class', '')
+        node['id'] = self.options.get('id', '')
+        node['wrapper_type'] = self.options.get('wrapper_type', 'div')
+        node['style'] = self.options.get('style', '')
+        print(self.options)
         self.state.nested_parse(self.content, self.content_offset, node)
         return [node]
 

otc_sphinx_directives/otc_sphinx_directives_setup.py

@@ -17,6 +17,7 @@
 from otc_sphinx_directives.service_group import service_group, service_group_html, ServiceGroup
 from otc_sphinx_directives.document_navigator import document_navigator, document_navigator_html, DocumentNavigator
 from otc_sphinx_directives.navigator import navigator, navigator_html, Navigator
+from otc_sphinx_directives.card_item import card_item, card_item_html, CardItem
 from otc_sphinx_directives.docs_link import docs_link, docs_link_html, DocsLink
 
 
@@ -33,6 +34,8 @@ def setup(app):
     app.add_directive("service_card", ServiceCard)
     app.add_node(container_item,
                  html=(container_item_html, None))
+    app.add_node(card_item,
+                 html=(card_item_html, None))
     app.add_node(navigator,
                  html=(navigator_html, None))
     app.add_node(service_navigator,
@@ -44,6 +47,7 @@ def setup(app):
     app.add_node(docs_link,
                  html=(docs_link_html, None))
     app.add_directive("container_item", ContainerItem)
+    app.add_directive("card_item", CardItem)
     app.add_directive("navigator", Navigator)
     app.add_directive("service_navigator", ServiceNavigator)
     app.add_directive("document_navigator", DocumentNavigator)