refactor(underlineTitle): add content box for different variations

eea · Jun 17, 2022 · 0878915 · 0878915
1 parent 0d0c774
commit 0878915
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 18 deletions.
diff --git a/src/ui/UnderlinedTitle/UnderlinedTitle.stories.jsx b/src/ui/UnderlinedTitle/UnderlinedTitle.stories.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Header, Divider, Container } from 'semantic-ui-react';
+import ContentBox from '../ContentBox/ContentBox';
 
 export default {
   title: 'Components/Underlined title',
@@ -27,41 +28,73 @@ export default {
         },
       },
     },
-    variation: {
-      defaultValue: 'tertiary',
-      options: ['primary', 'secondary', 'tertiary', 'white'],
-      control: { type: 'select' },
-      description: 'Color variation',
+    bordered: {
+      description: 'Bottom border for title',
       table: {
-        defaultValue: { summary: 'tertiary' },
-        type: { summary: 'string' },
+        defaultValue: { summary: 'true' },
+        type: { summary: 'boolean' },
       },
     },
-    bordered: {
+    white: {
+      name: 'White title',
       description: 'Bottom border for title',
       table: {
-        defaultValue: { summary: 'true' },
+        category: 'Backgound variants',
+        defaultValue: { summary: 'false' },
         type: { summary: 'boolean' },
       },
     },
+    variant: {
+      name: 'Background variation',
+      defaultValue: 'tertiary',
+      options: ['primary', 'secondary', 'tertiary'],
+      control: { type: 'select' },
+      description: 'Color variation',
+      table: {
+        category: 'Backgound variants',
+        defaultValue: { summary: 'tertiary' },
+        type: { summary: 'string' },
+      },
+      if: { arg: 'white' },
+    },
   },
 };
 
 export const Default = (args) => {
   return (
-    <Container>
-      <Header
-        as={args.tag}
-        className={`${args.variation} ${args.bordered ? 'bordered' : ''}`}
-      >
-        {args.title}
-      </Header>
-    </Container>
+    <ContentBox variant={`${args.white ? args.variant : 'default'}`}>
+      <Container className="content-box-inner">
+        <Header
+          as={args.tag}
+          className={`${args.white ? 'white' : args.variation} ${
+            args.bordered ? 'bordered' : ''
+          }`}
+        >
+          {args.title}
+        </Header>
+        <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 pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
+          semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
+          porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
+          dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla
+          ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam
+          ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
+        </p>
+      </Container>
+    </ContentBox>
   );
 };
 Default.args = {
   tag: 'h2',
   title: 'At a glance',
   bordered: true,
   variation: 'tertiary',
+  white: false,
 };
diff --git a/theme/themes/eea/globals/utilities.less b/theme/themes/eea/globals/utilities.less
@@ -1,5 +1,5 @@
 // Color
-h1, h2, h3, h4, h5, h6, p, span {
+h1, h2, h3, h4, h5, h6, p, span, .header {
   &.primary { color: @primaryColor !important; }
   &.secondary { color: @secondaryColor !important; }
   &.tertiary { color: @tertiaryColor !important; }