Merge pull request #12 from storybookjs/fix-icon-sizes-error

Fix icon sizes error
storybookjs · Aug 2, 2023 · b138997 · b138997
2 parents 71fa9c9 + d12b9e3
commit b138997
Show file tree

Hide file tree

Showing 228 changed files with 2,282 additions and 2,315 deletions.
diff --git a/src/Introduction.mdx b/src/Introduction.mdx
@@ -1,6 +1,8 @@
+import React, { lazy, createElement } from 'react';
 import { IconGallery, IconItem } from '@storybook/blocks';
-import { list } from './list';
+import { iconList } from './iconList';
 import Cover from './cover.png';
+import * as Icon from './';
 
 <style>
   {`
@@ -18,23 +20,25 @@ import Cover from './cover.png';
 
 An Icon is a piece of visual element, but we must ensure its accessibility while using it. It can have 2 purposes:
 
-- **Decorative only** — for example, it illustrates a label next to it. We must ensure that it is ignored by screen readers, by setting `aria-hidden` attribute (ex: `<Facehappy aria-hidden />`)
+- **Decorative only** — for example, it illustrates a label next to it. We must ensure that it is ignored by screen readers, by setting `aria-hidden` attribute (ex: `<FaceHappy aria-hidden />`)
 - **Non-decorative** — it means that it delivers information. For example, an icon as only child in a button. The meaning can be obvious visually, but it must have a proper text alternative via `aria-label` for screen readers. (ex: `<Print aria-label="Print this document" />`)
 
 <div className="spacer" />
 
-{list.map((group) => (
+{iconList.map((group) => (
 
 <div key={group.name}>
 
 <h2 style={{ marginTop: 32, marginBottom: 24 }}>{group.name}</h2>
 
   <IconGallery>
-    {group.icons.map((item) => (
-      <IconItem key={item.name} name={item.name}>
-        {item.icon}
+    {group.icons.map((item) => {
+      const MyIcon = Icon[item]
+      return (
+      <IconItem key={item} name={item}>
+        <MyIcon />
       </IconItem>
-    ))}
+    )})}
   </IconGallery>
 </div>
 

diff --git a/src/iconList.tsx b/src/iconList.tsx
@@ -0,0 +1,266 @@
+export const iconList = [
+  {
+    name: 'Images',
+    icons: [
+      'Photo',
+      'Component',
+      'Grid',
+      'Outline',
+      'PhotoDrag',
+      'GridAlt',
+      'Search',
+      'Zoom',
+      'ZoomOut',
+      'ZoomReset',
+      'Eye',
+      'EyeClose',
+      'Lightning',
+      'LightningOff',
+      'Contrast',
+      'SwitchAlt',
+      'Mirror',
+      'Grow',
+      'PaintBrush',
+      'Ruler',
+      'Stop',
+      'Camera',
+      'Video',
+      'Speaker',
+      'Play',
+      'PlayBack',
+      'PlayNext',
+      'Rewind',
+      'FastForward',
+      'StopAlt',
+      'SideBySide',
+      'Stacked',
+      'Sun',
+      'Moon',
+    ],
+  },
+  {
+    name: 'Documents',
+    icons: [
+      'Book',
+      'Document',
+      'Copy',
+      'Category',
+      'Folder',
+      'Print',
+      'GraphLine',
+      'Calendar',
+      'GraphBar',
+      'Menu',
+      'MenuReverse',
+      'Filter',
+      'DocChart',
+      'DocList',
+    ],
+  },
+  {
+    name: 'Editing',
+    icons: [
+      'Markup',
+      'Bold',
+      'Italic',
+      'PaperClip',
+      'ListOrdered',
+      'ListUnordered',
+      'Paragraph',
+      'Markdown',
+    ],
+  },
+  {
+    name: 'Git',
+    icons: ['Repo', 'Commit', 'Branch', 'PullRequest', 'Merge'],
+  },
+  {
+    name: 'OS',
+    icons: ['Apple', 'Linux', 'Ubuntu', 'Windows', 'Chrome'],
+  },
+  {
+    name: 'Logos',
+    icons: [
+      'Storybook',
+      'AzureDevOps',
+      'Bitbucket',
+      'Chromatic',
+      'ComponentDriven',
+      'Discord',
+      'Facebook',
+      'Figma',
+      'GDrive',
+      'Github',
+      'Gitlab',
+      'Google',
+      'Graphql',
+      'Medium',
+      'Redux',
+      'Twitter',
+      'Youtube',
+      'VSCode',
+      'Linkedin',
+    ],
+  },
+  {
+    name: 'Devices',
+    icons: [
+      'Browser',
+      'Tablet',
+      'Mobile',
+      'Watch',
+      'Sidebar',
+      'SidebarAlt',
+      'SidebarAltToggle',
+      'SidebarToggle',
+      'BottomBar',
+      'BottomBarToggle',
+      'CPU',
+      'Database',
+      'Memory',
+      'Structure',
+      'Box',
+      'Power',
+    ],
+  },
+  {
+    name: 'CRUD',
+    icons: [
+      'Edit',
+      'Cog',
+      'Nut',
+      'Wrench',
+      'Ellipsis',
+      'Wand',
+      'Check',
+      'Form',
+      'BatchDeny',
+      'BatchAccept',
+      'Controls',
+      'Plus',
+      'CloseAlt',
+      'Cross',
+      'Trash',
+      'PinAlt',
+      'Unpin',
+      'Add',
+      'Subtract',
+      'Close',
+      'Delete',
+      'Passed',
+      'Changed',
+      'Failed',
+      'Clear',
+      'Comment',
+      'CommentAdd',
+      'RequestChange',
+      'Comments',
+      'Chat',
+      'Lock',
+      'Unlock',
+      'Key',
+      'Outbox',
+      'Credit',
+      'Button',
+      'Type',
+      'PointerDefault',
+      'PointerHand',
+      'Command',
+    ],
+  },
+  {
+    name: 'Communicate',
+    icons: [
+      'Info',
+      'Question',
+      'Support',
+      'Alert',
+      'AlertAlt',
+      'Email',
+      'Phone',
+      'Link',
+      'LinkBroken',
+      'Bell',
+      'RSS',
+      'ShareAlt',
+      'Share',
+      'JumpTo',
+      'CircleHollow',
+      'Circle',
+      'BookmarkHollow',
+      'Bookmark',
+      'Diamond',
+      'HeartHollow',
+      'Heart',
+      'StarHollow',
+      'Star',
+      'Certificate',
+      'Verified',
+      'ThumbsUp',
+      'Shield',
+      'Basket',
+      'Beaker',
+      'Hourglass',
+      'Flag',
+      'CloudHollow',
+      'Cloud',
+      'Sticker',
+    ],
+  },
+  {
+    name: 'Wayfinding',
+    icons: [
+      'ChevronUp',
+      'ChevronDown',
+      'ChevronLeft',
+      'ChevronRight',
+      'ArrowUp',
+      'ArrowDown',
+      'ArrowLeft',
+      'ArrowRight',
+      'ArrowSolidUp',
+      'ArrowSolidDown',
+      'ArrowSolidLeft',
+      'ArrowSolidRight',
+      'ExpandAlt',
+      'Collapse',
+      'Expand',
+      'Unfold',
+      'Transfer',
+      'Redirect',
+      'Undo',
+      'Reply',
+      'Sync',
+      'Upload',
+      'Download',
+      'Back',
+      'Proceed',
+      'Refresh',
+      'Globe',
+      'Compass',
+      'Location',
+      'Pin',
+      'Time',
+      'Dashboard',
+      'Timer',
+      'Home',
+      'Admin',
+      'Direction',
+    ],
+  },
+  {
+    name: 'People',
+    icons: [
+      'User',
+      'UserAlt',
+      'UserAdd',
+      'Users',
+      'Profile',
+      'FaceHappy',
+      'FaceNeutral',
+      'FaceSad',
+      'Accessibility',
+      'AccessibilityAlt',
+    ],
+  },
+];
diff --git a/src/icons/Accessibility.tsx b/src/icons/Accessibility.tsx
@@ -8,8 +8,8 @@ export const Accessibility = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"

diff --git a/src/icons/AccessibilityAlt.tsx b/src/icons/AccessibilityAlt.tsx
@@ -8,8 +8,8 @@ export const AccessibilityAlt = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 15 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"

diff --git a/src/icons/Add.tsx b/src/icons/Add.tsx
@@ -8,8 +8,8 @@ export const Add = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"

diff --git a/src/icons/Admin.tsx b/src/icons/Admin.tsx
@@ -8,8 +8,8 @@ export const Admin = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"

diff --git a/src/icons/Alert.tsx b/src/icons/Alert.tsx
@@ -8,8 +8,8 @@ export const Alert = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"

diff --git a/src/icons/AlertAlt.tsx b/src/icons/AlertAlt.tsx
@@ -8,8 +8,8 @@ export const AlertAlt = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"

diff --git a/src/icons/Apple.tsx b/src/icons/Apple.tsx
@@ -8,8 +8,8 @@ export const Apple = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"

diff --git a/src/icons/ArrowDown.tsx b/src/icons/ArrowDown.tsx
@@ -8,8 +8,8 @@ export const ArrowDown = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"