Tabs and lists updates

eea · Jan 17, 2022 · e37eef1 · e37eef1
1 parent de0dfbc
commit e37eef1
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 16 deletions.
diff --git a/src/customizations/components/theme/List/DescriptionList.stories.js b/src/customizations/components/theme/List/DescriptionList.stories.js
@@ -10,18 +10,76 @@ export default {
         type: 'inline-radio',
       },
       options: ['top', 'middle', 'bottom'],
+      description: 'vertical alignment',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     floated: {
       control: {
         type: 'inline-radio',
       },
       options: ['left', 'right'],
+      description: 'floated left or right',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     size: {
       control: {
         type: 'select',
       },
       options: ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive'],
+      description: 'a list can vary in size',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    icon: {
+      description: 'list icon',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    selection: {
+      description: 'a selection list formats list items as possible choices',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    animated: {
+      description:
+        'a list can animate to set the current item apart from the list',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    divided: {
+      description: 'a list can show divisions between conten',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    horizontal: {
+      description: 'a list can be formatted to have items appear horizontally',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    items: {
+      description: 'array of list content',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: ' "" ' },
+      },
     },
   },
 };
@@ -49,7 +107,7 @@ function DescriptionList(
         <List.Item key={index}>
           <List.Content>
             <List.Header>
-              {icon && <List.Icon name="right triangle" />}
+              {icon && <List.Icon name="chevron right" />}
               {item.header}
             </List.Header>
             <List.Description floated={floated}>
@@ -86,9 +144,9 @@ Default.args = {
   horizontal: false,
   size: 'large',
   items: [
-    { header: 'header 1', content: 'Content 1', icon: 'users' },
-    { header: 'header 2', content: 'Content 2' },
-    { header: 'header 3', content: 'Content 3' },
-    { header: 'header 4', content: 'Content 4' },
+    { header: 'Header 1', content: 'Content 1', icon: 'users' },
+    { header: 'Header 2', content: 'Content 2' },
+    { header: 'Header 3', content: 'Content 3' },
+    { header: 'Header 4', content: 'Content 4' },
   ],
 };
diff --git a/src/customizations/components/theme/List/OrderedList.stories.js b/src/customizations/components/theme/List/OrderedList.stories.js
@@ -7,9 +7,50 @@ export default {
   argTypes: {
     size: {
       control: {
-        type: 'inline-radio',
+        type: 'select',
       },
       options: ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive'],
+      description: 'a list can vary in size',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    selection: {
+      description: 'a selection list formats list items as possible choices',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    animated: {
+      description:
+        'a list can animate to set the current item apart from the list',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    divided: {
+      description: 'a list can show divisions between conten',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    horizontal: {
+      description: 'a list can be formatted to have items appear horizontally',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    items: {
+      description: 'array of list content',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: ' "" ' },
+      },
     },
   },
 };

diff --git a/src/customizations/components/theme/List/UnorderedList.stories.js b/src/customizations/components/theme/List/UnorderedList.stories.js
@@ -10,6 +10,40 @@ export default {
         type: 'select',
       },
       options: ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive'],
+      description: 'a list can vary in size',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    animated: {
+      description:
+        'a list can animate to set the current item apart from the list',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    divided: {
+      description: 'a list can show divisions between conten',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    horizontal: {
+      description: 'a list can be formatted to have items appear horizontally',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    items: {
+      description: 'array of list content',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: ' "" ' },
+      },
     },
   },
 };

diff --git a/src/customizations/components/theme/Tab/Tab.stories.js b/src/customizations/components/theme/Tab/Tab.stories.js
@@ -55,8 +55,9 @@ Default.args = {
   ],
 };
 
-export const Playground = Template.bind({});
-Playground.args = {
+export const Vertical = Template.bind({});
+Vertical.args = {
+  vertical: true,
   panes: [
     {
       menuItem: 'Tab 1',
@@ -71,14 +72,9 @@ Playground.args = {
       pane: 'Tab 3 Content',
     },
   ],
-  // text: false,
-  // attached: false,
-  // tabular: false,
-  // borderless: false,
-  vertical: false,
 };
 
-Playground.argTypes = {
+Vertical.argTypes = {
   vertical: {
     description: 'vertical tab',
     table: {

diff --git a/theme/themes/eea/elements/list.overrides b/theme/themes/eea/elements/list.overrides
@@ -6,7 +6,24 @@
   font-family: @pageFont;
   font-size: @fontSize;
 }
+.ui.list > .item:before { 
+  font-weight: @itemHeaderFontWeight;
+}
+
+//Description List
+.ui.list .list>.item .description, .ui.list>.item .description {
+  margin-top: @relative8px;
+}
+.ui.list .list>.item i.icon, .ui.list>.item i.icon {
+  color: @bulletColor !important;
+}
+
+//Ordered list
+.ui.ordered.list .list>.item:before, .ui.ordered.list>.item:before, ol.ui.list li:before {
+  color: @bulletColor !important;
+}
 
+//Unordered list
 .ui.bulleted.list .list > .item:before,
 .ui.bulleted.list > .item:before,
 ul.ui.list li:before {

diff --git a/theme/themes/eea/modules/tab.overrides b/theme/themes/eea/modules/tab.overrides
@@ -15,8 +15,8 @@
     border-color: @silverGray;
 
     .active.item {
-      border-color: @secondaryColor;
-      color: @secondaryColor;
+      border-color: @secondaryColor  !important;
+      color: @secondaryColor  !important;
 
       &:hover {
         border-color: @secondaryColorDarken;