refactor(Divider):add divider with content inside story

eea · May 31, 2022 · e2d66dc · e2d66dc
1 parent 95f3018
commit e2d66dc
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 2 deletions.
diff --git a/src/ui/Divider/Divider.stories.jsx b/src/ui/Divider/Divider.stories.jsx
@@ -64,6 +64,17 @@ export default {
         },
       },
     },
+    content: {
+      description: 'Horizontal divider content',
+      table: {
+        type: {
+          summary: 'string | object',
+        },
+        defaultValue: {
+          summary: '',
+        },
+      },
+    },
   },
 };
 
@@ -77,7 +88,7 @@ function Template({ hidden, color, section, short, fitted }) {
         ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
         quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
         arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
-        Nullam dictum felis eu pede link mollis pretium.
+        Nullam dictum felis eu pede link mollis.
       </p>
       <Divider
         hidden={hidden}
@@ -92,7 +103,7 @@ function Template({ hidden, color, section, short, fitted }) {
         ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
         quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
         arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
-        Nullam dictum felis eu pede link mollis pretium.
+        Nullam dictum felis eu pede link mollis.
       </p>
     </Container>
   );
@@ -106,3 +117,52 @@ Default.args = {
   short: false,
   fitted: false,
 };
+Default.parameters = {
+  controls: { exclude: ['content'] },
+  hideNoControlsWarning: true,
+};
+
+function DividerWithContentTemplate({ content, color, section, fitted }) {
+  return (
+    <Container>
+      <p>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+        ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+        magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+        arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+        Nullam dictum felis eu pede link mollis.
+      </p>
+      <Divider
+        horizontal
+        section={section}
+        className={`${color === 'default' ? '' : color}`}
+        fitted={fitted}
+      >
+        <div>{content}</div>
+      </Divider>
+      <p>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+        ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+        magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+        arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+        Nullam dictum felis eu pede link mollis.
+      </p>
+    </Container>
+  );
+}
+
+export const DividerWithContent = DividerWithContentTemplate.bind({});
+DividerWithContent.args = {
+  content: 'Divider Content',
+  color: 'default',
+  section: false,
+  fitted: false,
+};
+DividerWithContent.parameters = {
+  controls: { exclude: ['short', 'hidden'] },
+  hideNoControlsWarning: true,
+};
diff --git a/theme/themes/eea/elements/divider.overrides b/theme/themes/eea/elements/divider.overrides
@@ -7,6 +7,35 @@
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
 }
 
+.ui.horizontal.divider.primary,.ui.horizontal.divider.secondary,.ui.horizontal.divider.tertiary  {
+
+  & > * {
+    padding: 0 15px;
+  }
+
+}
+
+.ui.horizontal.divider.primary:before,
+.ui.horizontal.divider.primary:after {
+  background-image: none;
+  border-top:1px solid @dividerPrimary;
+  transform:translateY(50%);
+}
+
+.ui.horizontal.divider.secondary:before,
+.ui.horizontal.divider.secondary:after {
+  background-image: none;
+  border-top:1px solid @dividerSecondary;
+  transform:translateY(50%);
+}
+
+.ui.horizontal.divider.tertiary:before,
+.ui.horizontal.divider.tertiary:after {
+  background-image: none;
+  border-top:1px solid @dividerTertiary;
+  transform:translateY(50%);
+}
+
 @media only screen and (max-width: (@tabletBreakpoint - 1px)) {
   .ui.stackable.grid .ui.vertical.divider:before,
   .ui.grid .stackable.row .ui.vertical.divider:before,