[OP-144] Icon example for button (#215)

This PR updates the badge documentation to allow seeing the prefix and suffix icons separately. It also brings that same demonstration to the button documentation.
RoleModel · Feb 7, 2024 · f8b4a56 · f8b4a56
1 parent 39b4e2f
commit f8b4a56
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 3 deletions.
diff --git a/src/stories/Components/Badge/Badge.js b/src/stories/Components/Badge/Badge.js
@@ -1,15 +1,25 @@
 import { createIcon } from '../Icon/Icon.js'
 
-export const createBadge = ({ label, style = 'default', pill = false, inButton = 'no', showIcons = false }) => {
+export const createBadge = ({
+  label,
+  style = 'default',
+  pill = false,
+  inButton = 'no',
+  showPrefixIcon = false,
+  showSuffixIcon = false,
+}) => {
   const badge = document.createElement('div')
   badge.innerText = label
 
   badge.className = [style === 'default' ? 'badge' : `badge-${style}`, pill ? 'badge--pill' : '']
     .filter(Boolean)
     .join(' ')
 
-  if (showIcons) {
+  if (showPrefixIcon) {
     badge.prepend(createIcon({ name: 'open_in_new' }))
+  }
+
+  if (showSuffixIcon) {
     badge.appendChild(createIcon({ name: 'add' }))
   }
 

diff --git a/src/stories/Components/Badge/Badge.stories.js b/src/stories/Components/Badge/Badge.stories.js
@@ -16,7 +16,11 @@ export default {
       control: { type: 'select' },
       options: ['no', 'right', 'left'],
     },
-    showIcons: {
+    showPrefixIcon: {
+      control: 'boolean',
+      description: 'This is not a class. It just provides an example of using icons within a badge',
+    },
+    showSuffixIcon: {
       control: 'boolean',
       description: 'This is not a class. It just provides an example of using icons within a badge',
     },

diff --git a/src/stories/Components/Button/Button.js b/src/stories/Components/Button/Button.js
@@ -12,6 +12,8 @@ export const createButton = ({
   disabled = false,
   inlineIconWithLabel = false,
   useAsLink = false,
+  showPrefixIcon = false,
+  showSuffixIcon = false,
 }) => {
   const element = useAsLink || disabled ? 'a' : 'button'
   const btn = document.createElement(element)
@@ -33,6 +35,14 @@ export const createButton = ({
     btn.prepend(createIcon({ name: 'add', size: 'large' }))
   }
 
+  if (showPrefixIcon) {
+    btn.prepend(createIcon({ name: 'open_in_new' }))
+  }
+
+  if (showSuffixIcon) {
+    btn.appendChild(createIcon({ name: 'add' }))
+  }
+
   btn.className = [
     priority === 'default' ? 'btn' : `btn-${priority}`,
     noBorder ? 'btn--no-border' : '',

diff --git a/src/stories/Components/Button/Button.stories.js b/src/stories/Components/Button/Button.stories.js
@@ -17,6 +17,14 @@ export default {
     pill: { control: 'boolean' },
     icon: { control: 'boolean' },
     iconWithLabel: { control: 'boolean' },
+    showPrefixIcon: {
+      control: 'boolean',
+      description: 'This is not a class. It just provides an example of using icons within a button',
+    },
+    showSuffixIcon: {
+      control: 'boolean',
+      description: 'This is not a class. It just provides an example of using icons within a button',
+    },
     size: {
       control: { type: 'select' },
       options: ['small', 'medium', 'large'],