diff --git a/packages/__docs__/components.ts b/packages/__docs__/components.ts index 4145d9c9b4..5fc4821138 100644 --- a/packages/__docs__/components.ts +++ b/packages/__docs__/components.ts @@ -123,6 +123,7 @@ export { View, ContextView } from '@instructure/ui-view' export { Tray } from '@instructure/ui-tray' export { Spinner } from '@instructure/ui-spinner' export * from '@instructure/ui-icons' +export * from '@instructure/ui-icons-lucide' // eslint-disable-next-line no-restricted-imports export { Guidelines } from './src/Guidelines' // eslint-disable-next-line no-restricted-imports diff --git a/packages/__docs__/package.json b/packages/__docs__/package.json index eb62cd8e56..a0ec908850 100644 --- a/packages/__docs__/package.json +++ b/packages/__docs__/package.json @@ -64,6 +64,7 @@ "@instructure/ui-heading": "workspace:*", "@instructure/ui-i18n": "workspace:*", "@instructure/ui-icons": "workspace:*", + "@instructure/ui-icons-lucide": "workspace:*", "@instructure/ui-img": "workspace:*", "@instructure/ui-instructure": "workspace:*", "@instructure/ui-link": "workspace:*", diff --git a/packages/__docs__/src/Icons/LegacyIconsGallery.tsx b/packages/__docs__/src/Icons/LegacyIconsGallery.tsx new file mode 100644 index 0000000000..e18f0c46d4 --- /dev/null +++ b/packages/__docs__/src/Icons/LegacyIconsGallery.tsx @@ -0,0 +1,376 @@ +/* + * The MIT License (MIT) + * + * Copyright (c) 2015 - present Instructure, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import { useState, useRef, memo, useCallback } from 'react' + +import { InlineSVG } from '@instructure/ui-svg-images' +import { Heading } from '@instructure/ui-heading' +import { TextInput } from '@instructure/ui-text-input' +import { SimpleSelect } from '@instructure/ui-simple-select' +import { Checkbox } from '@instructure/ui-checkbox' +import { FormFieldGroup } from '@instructure/ui-form-field' +import { IconButton } from '@instructure/ui-buttons' +import { Alert } from '@instructure/ui-alerts' +import { + ScreenReaderContent, + AccessibleContent +} from '@instructure/ui-a11y-content' +import { Modal } from '@instructure/ui-modal' +import { SourceCodeEditor } from '@instructure/ui-source-code-editor' +import * as InstIcons from '@instructure/ui-icons' +import { IconXSolid } from '@instructure/ui-icons' +import { Link } from '@instructure/ui-link' +import { Flex } from '@instructure/ui-flex' +import { Glyph } from '../../buildScripts/DataTypes.mjs' + +type Format = 'react' | 'svg' | 'font' + +type IconTileProps = { + glyph: Glyph + format: Format + rtl: boolean + onClick: (glyph: Glyph, styleType: StyleType) => void +} + +type LegacyIconsGalleryProps = { + glyphs: Glyph[] +} + +type StyleType = 'line' | 'solid' + +function getUsageInfo( + selectedGlyph: { glyph: Glyph; styleType: StyleType }, + format: Format +) { + const { + glyph: { name, lineSrc, solidSrc, glyphName }, + styleType + } = selectedGlyph + const styleTypeTitleCase = styleType === 'line' ? 'Line' : 'Solid' + if (format === 'react') { + const componentName = `${name}${styleTypeTitleCase}` + return `import { ${componentName} } from '@instructure/ui-icons' + +const MyIcon = () => { + return ( + <${componentName} /> + ) +}` + } else if (format === 'svg') { + return styleType === 'line' ? lineSrc : solidSrc + } + + return `import '@instructure/ui-icons/es/icon-font/${styleTypeTitleCase}/InstructureIcons-${styleTypeTitleCase}.css' + +const MyIcon = () => { + return ( +