From 9ecd45335aae55f3ec2c81db2a6f435f09c6edd6 Mon Sep 17 00:00:00 2001 From: Amy Resnik Date: Fri, 16 Oct 2026 16:53:55 -0400 Subject: [PATCH] Migrate Icons, Illustrations, and Patterns into gamut Storybook Co-locate the catalog stories within gamut-icons, gamut-illustrations, and gamut-patterns under Media & Assets, scanning those package src dirs from the Storybook config. Exclude stories from each package build and resolve ImageGallery via the ~storybook/blocks path. Remove the old styleguide stories, docs, and the now-unused icon category constants. Co-Authored-By: Claude Opus 4.8 (1M context) --- packages/.storybook/main.ts | 12 + .../Mini => gamut-icons/src}/Mini.stories.tsx | 16 +- packages/gamut-icons/src/Regular.stories.tsx | 209 ++++++++++++++++++ packages/gamut-icons/tsconfig.json | 7 +- .../src}/Illustrations.stories.tsx | 8 +- packages/gamut-illustrations/tsconfig.json | 7 +- .../src}/Patterns.stories.tsx | 8 +- packages/gamut-patterns/tsconfig.json | 7 +- .../styleguide/src/lib/Atoms/Icons/About.mdx | 87 -------- .../src/lib/Atoms/Icons/Mini/Mini.mdx | 51 ----- .../src/lib/Atoms/Icons/Regular/Regular.mdx | 76 ------- .../Atoms/Icons/Regular/Regular.stories.tsx | 68 ------ .../src/lib/Atoms/Icons/constants.tsx | 138 ------------ .../lib/Atoms/Illustrations/Illustrations.mdx | 53 ----- .../src/lib/Atoms/Patterns/Patterns.mdx | 44 ---- 15 files changed, 254 insertions(+), 537 deletions(-) rename packages/{styleguide/src/lib/Atoms/Icons/Mini => gamut-icons/src}/Mini.stories.tsx (60%) create mode 100644 packages/gamut-icons/src/Regular.stories.tsx rename packages/{styleguide/src/lib/Atoms/Illustrations => gamut-illustrations/src}/Illustrations.stories.tsx (87%) rename packages/{styleguide/src/lib/Atoms/Patterns => gamut-patterns/src}/Patterns.stories.tsx (86%) delete mode 100644 packages/styleguide/src/lib/Atoms/Icons/About.mdx delete mode 100644 packages/styleguide/src/lib/Atoms/Icons/Mini/Mini.mdx delete mode 100644 packages/styleguide/src/lib/Atoms/Icons/Regular/Regular.mdx delete mode 100644 packages/styleguide/src/lib/Atoms/Icons/Regular/Regular.stories.tsx delete mode 100644 packages/styleguide/src/lib/Atoms/Icons/constants.tsx delete mode 100644 packages/styleguide/src/lib/Atoms/Illustrations/Illustrations.mdx delete mode 100644 packages/styleguide/src/lib/Atoms/Patterns/Patterns.mdx diff --git a/packages/.storybook/main.ts b/packages/.storybook/main.ts index 7c83f43e6f..1e91b1f0ea 100644 --- a/packages/.storybook/main.ts +++ b/packages/.storybook/main.ts @@ -20,6 +20,18 @@ const config: StorybookConfig = { directory: '../gamut/src', files: '**/*.stories.@(js|jsx|ts|tsx)', }, + { + directory: '../gamut-icons/src', + files: '**/*.stories.@(js|jsx|ts|tsx)', + }, + { + directory: '../gamut-illustrations/src', + files: '**/*.stories.@(js|jsx|ts|tsx)', + }, + { + directory: '../gamut-patterns/src', + files: '**/*.stories.@(js|jsx|ts|tsx)', + }, ], staticDirs: ['../styleguide/src/static'], addons: [ diff --git a/packages/styleguide/src/lib/Atoms/Icons/Mini/Mini.stories.tsx b/packages/gamut-icons/src/Mini.stories.tsx similarity index 60% rename from packages/styleguide/src/lib/Atoms/Icons/Mini/Mini.stories.tsx rename to packages/gamut-icons/src/Mini.stories.tsx index 478d023c4e..d3a892a838 100644 --- a/packages/styleguide/src/lib/Atoms/Icons/Mini/Mini.stories.tsx +++ b/packages/gamut-icons/src/Mini.stories.tsx @@ -1,10 +1,10 @@ -import { GamutIconProps } from '@skillsoft/gamut-icons'; -// eslint-disable-next-line @skillsoft/gamut/import-paths -import * as miniIcons from '@skillsoft/gamut-icons/src/icons/mini'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; -import { ImageGallery } from '~styleguide/blocks'; +import { ImageGallery } from '~storybook/blocks'; + +import type { GamutIconProps } from '.'; +import * as miniIcons from './icons/mini'; type MiniIconProps = GamutIconProps & { icon: typeof miniIcons.MiniStarIcon; @@ -18,6 +18,7 @@ const MiniIconComponent: React.FC = ({ }; const meta: Meta = { + title: 'Media & Assets/Icons/Mini', component: MiniIconComponent, argTypes: { icon: { @@ -38,11 +39,10 @@ export const Default: Story = { }, }; +// Visual catalog of every mini icon — slow to render + axe, and redundant with +// `Default`. `!test` removes the auto-applied `test` tag so addon-vitest skips +// it; it still renders in Storybook. export const AllMiniIcons: Story = { - // Skip the render/a11y test on the full gallery — it's a visual catalog of - // every icon (slow to render + axe), and `Default` already covers the - // component's behavior. `!test` removes the auto-applied `test` tag so - // addon-vitest ignores this story (it still shows in Storybook). tags: ['!test'], render: () => { return ; diff --git a/packages/gamut-icons/src/Regular.stories.tsx b/packages/gamut-icons/src/Regular.stories.tsx new file mode 100644 index 0000000000..b4ebca7129 --- /dev/null +++ b/packages/gamut-icons/src/Regular.stories.tsx @@ -0,0 +1,209 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { ImageGallery } from '~storybook/blocks'; + +import type { GamutIconProps } from '.'; +import * as icons from './icons/regular'; + +type IconMap = Record>; + +const allIcons = icons as unknown as IconMap; + +const pick = (names: string[]): IconMap => + Object.fromEntries( + names + .filter((name) => name in allIcons) + .map((name) => [name, allIcons[name]]) + ); + +const VENDOR_ICON_NAMES = [ + 'AmexIcon', + 'AppleIcon', + 'DiscordIcon', + 'DiscordOutlineIcon', + 'EaIcon', + 'FacebookIcon', + 'FaviconIcon', + 'FaviconSolidIcon', + 'GithubIcon', + 'GithubOutlineIcon', + 'GoogleIcon', + 'GplusIcon', + 'IbmIcon', + 'InstagramIcon', + 'JiraIcon', + 'LinkedinIcon', + 'LinkedinOutlineIcon', + 'MastercardIcon', + 'MediumIcon', + 'MetaIcon', + 'MicrosoftIcon', + 'OpenAiFullIcon', + 'OpenAiIcon', + 'PaypalLogoIcon', + 'PercipioIcon', + 'RailsIcon', + 'ReactIcon', + 'RedditIcon', + 'RedditSolidIcon', + 'SlackIcon', + 'SpotifyIcon', + 'TikTokIcon', + 'TwitterIcon', + 'TwitterOutlineIcon', + 'VisaIcon', + 'WhatsAppFilledIcon', + 'XIcon', + 'YoutubeIcon', + 'YoutubePlayIcon', +].sort(); + +const LE_ICON_NAMES = [ + 'ArticleIcon', + 'BadgeIcon', + 'BookClosedBookmarkIcon', + 'CertificateFilledIcon', + 'CertificateIcon', + 'ChallengeProjectIcon', + 'ChecklistIcon', + 'EditorIcon', + 'FileSearchIcon', + 'FitnessDumbbellIcon', + 'ForumsChatIcon', + 'InformationalIcon', + 'InteractiveCursorIcon', + 'InstructionsIcon', + 'LearnIcon', + 'LessonIcon', + 'NarrativeIcon', + 'ObjectiveIcon', + 'OverviewIcon', + 'PathChangeIcon', + 'PathCompleteIcon', + 'PathIcon', + 'PinIcon', + 'PortfolioProjectIcon', + 'ProfessionalCertificateIcon', + 'ProjectsIcon', + 'QuizIcon', + 'ReportIcon', + 'ResponsiveIcon', + 'StreakIcon', + 'TerminalIcon', + 'TrophyFilledIcon', + 'TrophyIcon', +].sort(); + +const SKILLS_ICON_NAMES = [ + 'ArtificialIntelligenceIcon', + 'BashShellIcon', + 'CIcon', + 'CPlusIcon', + 'CSharpIcon', + 'CloudComputingIcon', + 'ComputerScienceIcon', + 'CybersecurityIcon', + 'DataAnalyticsIcon', + 'DataEngineeringIcon', + 'DataScienceIcon', + 'DataVisualizationIcon', + 'DevopsIcon', + 'FallbackSkillIcon', + 'FlutterIcon', + 'GameDevelopmentIcon', + 'GitIcon', + 'GoIcon', + 'HtmlCssIcon', + 'ItIcon', + 'JavaIcon', + 'JavascriptIcon', + 'KotlinIcon', + 'MachineLearningIcon', + 'MarkdownIcon', + 'MathIcon', + 'MobileDevelopmentIcon', + 'PhpIcon', + 'PythonIcon', + 'RIcon', + 'RubyIcon', + 'SqlIcon', + 'SwiftIcon', + 'TypescriptIcon', + 'WebDesignIcon', + 'WebDevelopmentIcon', +].sort(); + +const VENDOR_ICONS = pick(VENDOR_ICON_NAMES); +const LE_ICONS = pick(LE_ICON_NAMES); +const SKILLS_ICONS = pick(SKILLS_ICON_NAMES); + +const categorized = new Set([ + ...VENDOR_ICON_NAMES, + ...LE_ICON_NAMES, + ...SKILLS_ICON_NAMES, +]); + +const UI_ICONS: IconMap = Object.fromEntries( + Object.entries(allIcons).filter(([name]) => !categorized.has(name)) +); + +type IconProps = GamutIconProps & { + icon: typeof icons.AlertIcon; +}; + +const IconComponent: React.FC = ({ icon: Icon, ...rest }) => { + return ; +}; + +const meta: Meta = { + title: 'Media & Assets/Icons/Regular', + component: IconComponent, + argTypes: { + icon: { + options: Object.keys(icons), + mapping: icons, + control: 'select', + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + size: 40, + icon: icons.AlertIcon, + }, +}; + +// The gallery stories are visual catalogs of every icon (slow to render + axe, +// and redundant with `Default`). `!test` removes the auto-applied `test` tag so +// addon-vitest skips them; they still render in Storybook. +export const RegularInterfaceIcons: Story = { + tags: ['!test'], + render: () => { + return ; + }, +}; + +export const RegularLearningEnvironmentIcons: Story = { + tags: ['!test'], + render: () => { + return ; + }, +}; + +export const RegularVendorIcons: Story = { + tags: ['!test'], + render: () => { + return ; + }, +}; + +export const RegularSkillIcons: Story = { + tags: ['!test'], + render: () => { + return ; + }, +}; diff --git a/packages/gamut-icons/tsconfig.json b/packages/gamut-icons/tsconfig.json index ccf95557bf..c67a40eb25 100644 --- a/packages/gamut-icons/tsconfig.json +++ b/packages/gamut-icons/tsconfig.json @@ -7,7 +7,10 @@ "outDir": "./dist", "strict": true, "strictFunctionTypes": false, - "types": [] + "types": [], + "paths": { + "~storybook/blocks": ["../.storybook/components/"] + } }, "include": [ "../../typings/*.d.ts", @@ -15,5 +18,5 @@ "./src/**/*.tsx", "../../packages/gamut-styles/dist/typings/theme.d.ts" ], - "exclude": ["jest.config.ts"] + "exclude": ["jest.config.ts", "**/*.stories.tsx"] } diff --git a/packages/styleguide/src/lib/Atoms/Illustrations/Illustrations.stories.tsx b/packages/gamut-illustrations/src/Illustrations.stories.tsx similarity index 87% rename from packages/styleguide/src/lib/Atoms/Illustrations/Illustrations.stories.tsx rename to packages/gamut-illustrations/src/Illustrations.stories.tsx index 6de062237f..fc468478bd 100644 --- a/packages/styleguide/src/lib/Atoms/Illustrations/Illustrations.stories.tsx +++ b/packages/gamut-illustrations/src/Illustrations.stories.tsx @@ -1,8 +1,9 @@ -import type { IllustrationProps } from '@skillsoft/gamut-illustrations'; -import * as illustrations from '@skillsoft/gamut-illustrations'; import type { Meta, StoryObj } from '@storybook/react'; -import { ImageGallery } from '~styleguide/blocks'; +import { ImageGallery } from '~storybook/blocks'; + +import type { IllustrationProps } from '.'; +import * as illustrations from '.'; type IllustrationComponentProps = IllustrationProps & { illustration: React.ComponentType; @@ -16,6 +17,7 @@ const IllustrationComponent: React.FC = ({ }; const meta: Meta = { + title: 'Media & Assets/Illustrations', component: IllustrationComponent, argTypes: { illustration: { diff --git a/packages/gamut-illustrations/tsconfig.json b/packages/gamut-illustrations/tsconfig.json index 85661302d9..3790d378b5 100644 --- a/packages/gamut-illustrations/tsconfig.json +++ b/packages/gamut-illustrations/tsconfig.json @@ -6,7 +6,10 @@ "jsx": "react-jsx", "outDir": "./dist", "rootDir": "./src", - "types": ["jest"] + "types": ["jest"], + "paths": { + "~storybook/blocks": ["../.storybook/components/"] + } }, - "exclude": ["jest.config.ts"] + "exclude": ["jest.config.ts", "**/*.stories.tsx"] } diff --git a/packages/styleguide/src/lib/Atoms/Patterns/Patterns.stories.tsx b/packages/gamut-patterns/src/Patterns.stories.tsx similarity index 86% rename from packages/styleguide/src/lib/Atoms/Patterns/Patterns.stories.tsx rename to packages/gamut-patterns/src/Patterns.stories.tsx index 430093c5c6..69559fca0d 100644 --- a/packages/styleguide/src/lib/Atoms/Patterns/Patterns.stories.tsx +++ b/packages/gamut-patterns/src/Patterns.stories.tsx @@ -1,8 +1,9 @@ -import type { PatternProps } from '@skillsoft/gamut-patterns'; -import * as patterns from '@skillsoft/gamut-patterns'; import type { Meta, StoryObj } from '@storybook/react'; -import { ImageGallery } from '~styleguide/blocks'; +import { ImageGallery } from '~storybook/blocks'; + +import type { PatternProps } from '.'; +import * as patterns from '.'; type PatternComponentProps = PatternProps & { pattern: React.ComponentType; @@ -16,6 +17,7 @@ const PatternComponent: React.FC = ({ }; const meta: Meta = { + title: 'Media & Assets/Patterns', component: PatternComponent, argTypes: { pattern: { diff --git a/packages/gamut-patterns/tsconfig.json b/packages/gamut-patterns/tsconfig.json index c7350ca5bb..23ac374d13 100644 --- a/packages/gamut-patterns/tsconfig.json +++ b/packages/gamut-patterns/tsconfig.json @@ -12,7 +12,10 @@ "jsx": "react-jsx", "outDir": "./dist", "rootDir": "./src", - "types": [] + "types": [], + "paths": { + "~storybook/blocks": ["../.storybook/components/"] + } }, - "exclude": ["jest.config.ts"] + "exclude": ["jest.config.ts", "**/*.stories.tsx"] } diff --git a/packages/styleguide/src/lib/Atoms/Icons/About.mdx b/packages/styleguide/src/lib/Atoms/Icons/About.mdx deleted file mode 100644 index 2a461a81a5..0000000000 --- a/packages/styleguide/src/lib/Atoms/Icons/About.mdx +++ /dev/null @@ -1,87 +0,0 @@ -import { Anchor } from '@skillsoft/gamut'; -import { Meta } from '@storybook/addon-docs/blocks'; - -import { - AboutHeader, - addParentPath, - Callout, - TableOfContents, -} from '~styleguide/blocks'; - -import { parameters as miniParameters } from './Mini/Mini.mdx'; -import { parameters as regularParameters } from './Regular/Regular.mdx'; - -export const parameters = { - id: 'Atoms/Icons', - title: 'Icons', - subtitle: - 'SVG Icon components from [Streamline](https://streamlineicons.com/).', -}; - - - - - -## Adding an Icon - -### Designers - -1. Identify a need for an icon. -2. Find/request one on [streamline](https://www.streamlinehq.com/) (credentials in 1Password) for the appropriate type (Regular or Mini). -3. Follows the Design guidelines for adding an Icon to the Figma library. - 1. [regular icons](https://scribehow.com/shared/How_to_add_a_regular_size_icon_to_the_Figma_library__89he3MpFQj-7d9CP6AFLQg) - 2. [mini icons](https://scribehow.com/shared/How_to_add_a_mini_size_icon_to_the_Figma_library__mDFi_BuaQ-yHDsufs9tlxQ) - 3. NOTE: If you're blocked from accessing the links, please turn off your VPN temporarily. -4. Handoff the SVG to an engineer (the icon should pull from Streamline). - -### Developers - -1. Given an Icon SVG from Design or an approved Streamline icon, check whether the Icon is Regular or Mini. - 1. Regular Icons should come from "Ultimate Regular" and have `viewBox="0 0 24 24"` and have `stroke-width= "1.5"`. - 2. Mini Icons should come from "Core Solid" have `viewBox="0 0 16 16"` and have outline. - 3. You should be using the Icon from Streamline, NOT Figma. -2. If it doesn't already have it add the streamline slug (IE: `delete-1`) as the SVG title if it does not already exist and ensure the viewBox is set to `viewBox="0 0 24 24"`. Preserve the source URL, add any relevent comments, and disregard the asset size. -3. Add the SVG asset to the appropriate folder in `packages/gamut-icons/src/svg/` - either [regular](https://github.com/Codecademy/gamut/tree/main/packages/gamut-icons) or [mini](https://github.com/Codecademy/gamut/tree/main/packages/gamut-icons/mini). - 1. Regular Icons should follow the naming convention: `-icon.svg` (e.g. `add-icon.svg` or `alarm-clock-icon.svg`) - 2. Mini Icons should follow the naming convention: `mini--icon.svg` (e.g. `mini-star-icon.svg`) -4. Run `yarn build-all && yarn start` to see the icon add to Storybook. - 1. Regular Icons will by default be added to the `Interface` section alphabetically, however, you may change this in the config. I.e. if you added an icon that should belong in the `Vendor` section, you can make this change in the `constants.tsx` file. -5. Make a PR describing where you got the Icon, what its use is with a description of its naming choice. - -### Troubleshooting - -Our icons all are transformed with a [custom Babel plugin](https://github.com/Codecademy/gamut/blob/cass-gm-fix-lx-icons/packages/gamut-icons/mask-plugin.js) that ensures our icons all can consistently render semi-opaque colors without overlay issues. This occasionally can cause unintended changes - if your icon isn't rendering the way you'd expect, try the steps below. - - - You can edit SVGs and see changes in real-time with{' '} - SVGViewer - - } -/> - -1. If the icon is not rendering correctly, check that if the initial asset has a `` -- if it does, ask the designer to remove it. Gamut will add in a mask during the build process. - -2. If the icon has `fill=none` on the `svg` element, you may need to move `fill=none` to each of the `path` elements instead, for example - - -```tsx - -// before - - - - - -// after - - - - - - -``` - - diff --git a/packages/styleguide/src/lib/Atoms/Icons/Mini/Mini.mdx b/packages/styleguide/src/lib/Atoms/Icons/Mini/Mini.mdx deleted file mode 100644 index fc09c323e2..0000000000 --- a/packages/styleguide/src/lib/Atoms/Icons/Mini/Mini.mdx +++ /dev/null @@ -1,51 +0,0 @@ -import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; - -import { ComponentHeader } from '~styleguide/blocks'; - -import * as MiniIconStories from './Mini.stories'; - -export const parameters = { - title: 'Mini', - subtitle: - 'A subset of [Streamline Mini Bold](https://app.streamlinehq.com/streamline-mini-bold). These are a smaller set of icons that are bolder and work well in smaller resolutions.', - design: { - type: 'figma', - url: 'https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1883-1795', - }, - status: 'current', - source: { - repo: 'gamut-icons', - githubLink: - 'https://github.com/Codecademy/gamut/tree/main/packages/gamut-icons/src/svg/mini', - }, -}; - - - - - -## General infomation - -For mini icons, we use a subset of [Streamline's "Core Solid" icons](https://www.streamlinehq.com/icons/core-solid). - -Our icons by using standardized with a viewBox size of `"0 0 16 16"`. Icons should be centered and take up the entirety of this viewBox. - -All of our Icons are not minified by default, and optimized by [SVGO](https://github.com/svg/svgo) before build time. We like to preserve the source URL as well as any relevent comments or metadata within these SVGs. - -Example usage: - -```jsx -import { MiniStarIcon } from '@skillsoft/gamut-icons'; - -; -``` - -## Playground - - - - - -## Icons - - diff --git a/packages/styleguide/src/lib/Atoms/Icons/Regular/Regular.mdx b/packages/styleguide/src/lib/Atoms/Icons/Regular/Regular.mdx deleted file mode 100644 index 859b020a60..0000000000 --- a/packages/styleguide/src/lib/Atoms/Icons/Regular/Regular.mdx +++ /dev/null @@ -1,76 +0,0 @@ -import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; - -import { ComponentHeader } from '~styleguide/blocks'; - -import * as RegularIconStories from './Regular.stories'; - -export const parameters = { - title: 'Regular', - subtitle: - 'A regular sized Icon set primarily from [Streamline Regular](https://app.streamlinehq.com/streamline-regular).', - design: { - type: 'figma', - url: 'https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1883-1795', - }, - status: 'current', - source: { - repo: 'gamut-icons', - githubLink: - 'https://github.com/Codecademy/gamut/tree/main/packages/gamut-icons/src/svg/regular', - }, -}; - - - - - -## General infomation - -For regular icons, we use a subset of [Streamline's "Ultimate Regular" icons](https://www.streamlinehq.com/icons/streamline-regular). - -Our icons are standardized with a viewBox size of `"0 0 24 24"`. Icons should be centered and take up the entirety of this viewBox. - -All of our Icons are not minified by default, and optimized by [SVGO](https://github.com/svg/svgo) before build time. We like to preserve the source URL as well as any relevent comments or metadata within these SVGs. - -Example usage: - -```jsx -import { AlertIcon } from '@skillsoft/gamut-icons'; - -; -``` - -## Playground - - - - - -## Icons - -### Interface - -General user interface icons with affordances - - - -### Learning environment - -Icons that have specific meanings relative to our course content. - - - -### Vendor - -Vendor specific icons. - - - -### Skills - -Icons for the languages and subjects that we teach. - - diff --git a/packages/styleguide/src/lib/Atoms/Icons/Regular/Regular.stories.tsx b/packages/styleguide/src/lib/Atoms/Icons/Regular/Regular.stories.tsx deleted file mode 100644 index e9c0fce632..0000000000 --- a/packages/styleguide/src/lib/Atoms/Icons/Regular/Regular.stories.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { GamutIconProps } from '@skillsoft/gamut-icons'; -// eslint-disable-next-line @skillsoft/gamut/import-paths -import * as icons from '@skillsoft/gamut-icons/src/icons/regular'; -import type { Meta, StoryObj } from '@storybook/react'; - -import { ImageGallery } from '~styleguide/blocks'; - -import { LE_ICONS, SKILLS_ICONS, UI_ICONS, VENDOR_ICONS } from '../constants'; - -type IconProps = GamutIconProps & { - icon: typeof icons.AlertIcon; -}; - -const IconComponent: React.FC = ({ icon: Icon, ...rest }) => { - return ; -}; - -const meta: Meta = { - component: IconComponent, - argTypes: { - icon: { - options: Object.keys(icons), - mapping: icons, - control: 'select', - }, - }, -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: { - size: 40, - icon: icons.AlertIcon, - }, -}; - -// The gallery stories are visual catalogs of every icon (slow to render + axe, -// and redundant with `Default`). `!test` removes the auto-applied `test` tag so -// addon-vitest skips them; they still render in Storybook. -export const RegularInterfaceIcons: Story = { - tags: ['!test'], - render: () => { - return ; - }, -}; - -export const RegularLearningEnvironmentIcons: Story = { - tags: ['!test'], - render: () => { - return ; - }, -}; - -export const RegularVendorIcons: Story = { - tags: ['!test'], - render: () => { - return ; - }, -}; - -export const RegularSkillIcons: Story = { - tags: ['!test'], - render: () => { - return ; - }, -}; diff --git a/packages/styleguide/src/lib/Atoms/Icons/constants.tsx b/packages/styleguide/src/lib/Atoms/Icons/constants.tsx deleted file mode 100644 index 86c2b980a9..0000000000 --- a/packages/styleguide/src/lib/Atoms/Icons/constants.tsx +++ /dev/null @@ -1,138 +0,0 @@ -// eslint-disable-next-line @skillsoft/gamut/import-paths -import * as icons from '@skillsoft/gamut-icons/src/icons/regular'; -import keys from 'lodash/keys'; -import omit from 'lodash/omit'; -import pick from 'lodash/pick'; - -export const ICONS = icons; - -export const VENDOR_ICONS = pick( - ICONS, - [ - 'AmexIcon', - 'AppleIcon', - 'DiscordIcon', - 'DiscordOutlineIcon', - 'EaIcon', - 'FacebookIcon', - 'FaviconIcon', - 'FaviconSolidIcon', - 'GithubIcon', - 'GithubOutlineIcon', - 'GoogleIcon', - 'GplusIcon', - 'IbmIcon', - 'InstagramIcon', - 'JiraIcon', - 'LinkedinIcon', - 'LinkedinOutlineIcon', - 'MastercardIcon', - 'MediumIcon', - 'MetaIcon', - 'MicrosoftIcon', - 'OpenAiFullIcon', - 'OpenAiIcon', - 'PaypalLogoIcon', - 'PercipioIcon', - 'RailsIcon', - 'ReactIcon', - 'RedditIcon', - 'RedditSolidIcon', - 'SlackIcon', - 'SpotifyIcon', - 'TikTokIcon', - 'TwitterIcon', - 'TwitterOutlineIcon', - 'VisaIcon', - 'WhatsAppFilledIcon', - 'XIcon', - 'YoutubeIcon', - 'YoutubePlayIcon', - ].sort() -); - -export const LE_ICONS = pick( - ICONS, - [ - 'ArticleIcon', - 'BadgeIcon', - 'BookClosedBookmarkIcon', - 'CertificateFilledIcon', - 'CertificateIcon', - 'ChallengeProjectIcon', - 'ChecklistIcon', - 'EditorIcon', - 'FileSearchIcon', - 'FitnessDumbbellIcon', - 'ForumsChatIcon', - 'InformationalIcon', - 'InteractiveCursorIcon', - 'InstructionsIcon', - 'LearnIcon', - 'LessonIcon', - 'NarrativeIcon', - 'ObjectiveIcon', - 'OverviewIcon', - 'PathChangeIcon', - 'PathCompleteIcon', - 'PathIcon', - 'PinIcon', - 'PortfolioProjectIcon', - 'ProfessionalCertificateIcon', - 'ProjectsIcon', - 'QuizIcon', - 'ReportIcon', - 'ResponsiveIcon', - 'StreakIcon', - 'TerminalIcon', - 'TrophyFilledIcon', - 'TrophyIcon', - ].sort() -); - -export const SKILLS_ICONS = pick( - ICONS, - [ - 'ArtificialIntelligenceIcon', - 'BashShellIcon', - 'CIcon', - 'CPlusIcon', - 'CSharpIcon', - 'CloudComputingIcon', - 'ComputerScienceIcon', - 'CybersecurityIcon', - 'DataAnalyticsIcon', - 'DataEngineeringIcon', - 'DataScienceIcon', - 'DataVisualizationIcon', - 'DevopsIcon', - 'FallbackSkillIcon', - 'FlutterIcon', - 'GameDevelopmentIcon', - 'GitIcon', - 'GoIcon', - 'HtmlCssIcon', - 'ItIcon', - 'JavaIcon', - 'JavascriptIcon', - 'KotlinIcon', - 'MachineLearningIcon', - 'MarkdownIcon', - 'MathIcon', - 'MobileDevelopmentIcon', - 'PhpIcon', - 'PythonIcon', - 'RIcon', - 'RubyIcon', - 'SqlIcon', - 'SwiftIcon', - 'TypescriptIcon', - 'WebDesignIcon', - 'WebDevelopmentIcon', - ].sort() -); - -export const UI_ICONS = omit( - ICONS, - keys({ ...LE_ICONS, ...VENDOR_ICONS, ...SKILLS_ICONS }) -); diff --git a/packages/styleguide/src/lib/Atoms/Illustrations/Illustrations.mdx b/packages/styleguide/src/lib/Atoms/Illustrations/Illustrations.mdx deleted file mode 100644 index b1023c93a1..0000000000 --- a/packages/styleguide/src/lib/Atoms/Illustrations/Illustrations.mdx +++ /dev/null @@ -1,53 +0,0 @@ -import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; - -import { ComponentHeader } from '~styleguide/blocks'; - -import * as IllustrationsStories from './Illustrations.stories'; - -export const parameters = { - title: 'Illustrations', - subtitle: - 'React components that serve up SVGs to provide more control and reusability.', - status: 'current', - source: { - repo: 'gamut-illustrations', - githubLink: - 'https://github.com/Codecademy/gamut/tree/main/packages/gamut-illustrations/src', - }, -}; - - - - - -## Usage - -Illustrations are intended to be able to take in props for variants such as color, so despite being SVG-based, they're stored in our code as regular React components and can be used like so: - -```jsx -import { NumberBlocks } from '@skillsoft/gamut-illustrations'; - -; -``` - -## Adding an illustration - -If you cannot find the Illustration you would like in the ones that we have specified here, please follow these steps to add one. - -1. In a Figma that contains an illustration, right-click on the layer and copy it as an SVG -2. Use `svgo`, such as through https://jakearchibald.github.io/svgomg, to minify that markup - - Tip: the default settings work _except_ you'll need to add the root `viewport` attribute back to the `` -3. Paste the SVG in a new component under `packages/gamut-illustrations/src/.tsx` -4. Run the ESLint auto-fixer to correct React attribute names -5. Add the illustration under `packages/gamut-illustrations/src/index.ts` -6. Send this in as a `feat` pull request - -## Playground - - - - - -## Illustrations - - diff --git a/packages/styleguide/src/lib/Atoms/Patterns/Patterns.mdx b/packages/styleguide/src/lib/Atoms/Patterns/Patterns.mdx deleted file mode 100644 index b7c471325c..0000000000 --- a/packages/styleguide/src/lib/Atoms/Patterns/Patterns.mdx +++ /dev/null @@ -1,44 +0,0 @@ -import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; - -import { ComponentHeader } from '~styleguide/blocks'; - -import * as PatternsStories from './Patterns.stories'; - -export const parameters = { - title: 'Patterns', - subtitle: 'Standard background fill patterns.', - status: 'current', - design: { - type: 'figma', - url: 'https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1124%3A1569', - }, - source: { - repo: 'gamut-patterns', - githubLink: - 'https://github.com/Codecademy/gamut/tree/main/packages/gamut-patterns/src/svg', - }, -}; - - - - - -## Usage - -Patterns are intended to be able to take in a color and any system layout, positioning, and spacing props. - -```jsx -import { DotsLoose } from '@skillsoft/gamut-patterns'; - -; -``` - -## Playground - - - - - -## Patterns - -