-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
54d2882
commit 3d6511e
Showing
30 changed files
with
505 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| icons | ||
| src/icons | ||
| storybook-static |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -111,3 +111,5 @@ dist | |
|
|
||
| src/icons | ||
| !src/icons/.gitkeep | ||
|
|
||
| storybook-static | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { ArgTypes, Canvas, Controls, Description, Markdown, Meta, Source, Stories, Title } from '@storybook/blocks'; | ||
|
|
||
| <div className="tw-mx-5 sb-unstyled"> | ||
|
|
||
| <Meta isTemplate /> | ||
|
|
||
| <Title /> | ||
|
|
||
| <Description /> | ||
|
|
||
| ## Preview | ||
|
|
||
| <Canvas sourceState="shown" /> | ||
|
|
||
| ## Controls | ||
|
|
||
| <Controls /> | ||
|
|
||
| ## API | ||
|
|
||
| <ArgTypes /> | ||
|
|
||
| <Stories /> | ||
|
|
||
| </div> |
Binary file added
BIN
+35.6 KB
packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Bold.woff
Binary file not shown.
Binary file added
BIN
+28.3 KB
packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Bold.woff2
Binary file not shown.
Binary file added
BIN
+36.3 KB
packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Medium.woff
Binary file not shown.
Binary file added
BIN
+28.9 KB
packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Medium.woff2
Binary file not shown.
Binary file added
BIN
+36.7 KB
packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Regular.woff
Binary file not shown.
Binary file added
BIN
+29.3 KB
packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Regular.woff2
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import { create } from '@storybook/theming/create'; | ||
|
|
||
| export const light = create({ | ||
| base: 'light', | ||
|
|
||
| colorPrimary: '#2d3232', | ||
| colorSecondary: '#825fff', | ||
|
|
||
| // UI | ||
| appBg: 'white', | ||
| appBorderColor: '#EAEBEE', | ||
| appBorderRadius: 4, | ||
|
|
||
| // Typography | ||
| fontBase: | ||
| "'Space Grotesk Frontify', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", | ||
| fontCode: 'Menlo, Courier, monospace', | ||
|
|
||
| // Text colors | ||
| textColor: '#2d3232', | ||
|
|
||
| // Toolbar default and active colors | ||
| barTextColor: '#2d3232', | ||
| barSelectedColor: '#2d3232', | ||
| barBg: '#FFFFFF', | ||
|
|
||
| // Form colors | ||
| inputBg: '#FFFFFF', | ||
| inputBorder: '#EAEBEE', | ||
| inputTextColor: '#2d3232', | ||
| inputBorderRadius: 4, | ||
|
|
||
| brandTitle: 'Frontify Storybook', | ||
| brandUrl: 'https://frontify.com', | ||
| brandImage: '/img/logo-charcoal.svg', | ||
| }); | ||
|
|
||
| export const dark = create({ | ||
| base: 'dark', | ||
|
|
||
| colorPrimary: '#fafafa', | ||
| colorSecondary: '#825fff', | ||
|
|
||
| // UI | ||
| appBg: '#1a1c1c', | ||
| appBorderColor: '#424747', | ||
| appBorderRadius: 4, | ||
|
|
||
| // Typography | ||
| fontBase: | ||
| "'Space Grotesk Frontify', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", | ||
| fontCode: 'Menlo, Courier, monospace', | ||
|
|
||
| // Text colors | ||
| textColor: '#fafafa', | ||
|
|
||
| // Toolbar default and active colors | ||
| barTextColor: '#fafafa', | ||
| barSelectedColor: '#fafafa', | ||
| barBg: '#1a1d1d', | ||
|
|
||
| // Form colors | ||
| inputBg: '#1a1c1c', | ||
| inputBorder: '#424747', | ||
| inputTextColor: '#fafafa', | ||
| inputBorderRadius: 4, | ||
|
|
||
| brandTitle: 'Frontify Storybook', | ||
| brandUrl: 'https://frontify.com', | ||
| brandImage: '/img/logo-white.svg', | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import type { StorybookConfig } from '@storybook/react-vite'; | ||
|
|
||
| const config: StorybookConfig = { | ||
| stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], | ||
| staticDirs: ['assets'], | ||
| addons: [ | ||
| '@etchteam/storybook-addon-status', | ||
| '@storybook/addon-a11y', | ||
| '@storybook/addon-essentials', | ||
| '@storybook/addon-interactions', | ||
| '@storybook/addon-links', | ||
| 'storybook-dark-mode', | ||
| ], | ||
| framework: { | ||
| name: '@storybook/react-vite', | ||
| options: {}, | ||
| }, | ||
| docs: { | ||
| autodocs: 'tag', | ||
| defaultName: 'Documentation', | ||
| }, | ||
| viteFinal(config) { | ||
| // @ts-expect-error untyped name property | ||
| config.plugins = (config.plugins ?? []).filter((plugin) => plugin?.name !== 'vite:dts'); | ||
|
|
||
| return config; | ||
| }, | ||
| }; | ||
|
|
||
| export default config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <!-- Custom CSS for Storybook interface goes here --> | ||
| <style> | ||
| .sidebar-header { | ||
| /* Center dropdown button */ | ||
| align-items: center !important; | ||
| } | ||
|
|
||
| .sidebar-header img { | ||
| /* Responsive sidebar header image */ | ||
| width: 100%; | ||
| max-width: 200px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| /* (c) Copyright Frontify Ltd., all rights reserved. */ | ||
|
|
||
| import { addons } from '@storybook/manager-api'; | ||
| import { light } from './frontifyTheme'; | ||
|
|
||
| addons.setConfig({ | ||
| theme: light, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| <style> | ||
| @font-face { | ||
| font-display: swap; | ||
| font-family: 'Space Grotesk Frontify'; | ||
| font-style: normal; | ||
| font-weight: 300; | ||
| src: | ||
| url('/fonts/SpaceGroteskFrontify-Light.woff2') format('woff2'), | ||
| url('/fonts/SpaceGroteskFrontify-Light.woff') format('woff'); | ||
| } | ||
|
|
||
| @font-face { | ||
| font-display: swap; | ||
| font-family: 'Space Grotesk Frontify'; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| src: | ||
| url('/fonts/SpaceGroteskFrontify-Regular.woff2') format('woff2'), | ||
| url('/fonts/SpaceGroteskFrontify-Regular.woff') format('woff'); | ||
| } | ||
|
|
||
| @font-face { | ||
| font-display: swap; | ||
| font-family: 'Space Grotesk Frontify'; | ||
| font-style: normal; | ||
| font-weight: 500; | ||
| src: | ||
| url('/fonts/SpaceGroteskFrontify-Medium.woff2') format('woff2'), | ||
| url('/fonts/SpaceGroteskFrontify-Medium.woff') format('woff'); | ||
| } | ||
|
|
||
| @font-face { | ||
| font-display: swap; | ||
| font-family: 'Space Grotesk Frontify'; | ||
| font-style: normal; | ||
| font-weight: 600; | ||
| src: | ||
| url('/fonts/SpaceGroteskFrontify-SemiBold.woff2') format('woff2'), | ||
| url('/fonts/SpaceGroteskFrontify-SemiBold.woff') format('woff'); | ||
| } | ||
|
|
||
| @font-face { | ||
| font-display: swap; | ||
| font-family: 'Space Grotesk Frontify'; | ||
| font-style: normal; | ||
| font-weight: 700; | ||
| src: | ||
| url('/fonts/SpaceGroteskFrontify-Bold.woff2') format('woff2'), | ||
| url('/fonts/SpaceGroteskFrontify-Bold.woff') format('woff'); | ||
| } | ||
|
|
||
| .side-by-side { | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr; | ||
| height: 100%; | ||
| min-height: 100vh; | ||
| } | ||
|
|
||
| .light.theme { | ||
| background: white; | ||
| padding: 1rem; | ||
| } | ||
|
|
||
| .tw-dark.theme { | ||
| background: #1a1c1c; | ||
| padding: 1rem; | ||
| height: 100%; | ||
| min-height: 100vh; | ||
| } | ||
| </style> | ||
|
|
||
| <script> | ||
| const global = globalThis; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import '@frontify/fondue-tokens/styles'; | ||
| import 'tailwindcss/tailwind.css'; | ||
| import type { Preview } from '@storybook/react'; | ||
| import DocumentationTemplate from './DocumentationTemplate.mdx'; | ||
|
|
||
| const preview: Preview = { | ||
| parameters: { | ||
| docs: { | ||
| page: DocumentationTemplate, | ||
| toc: { | ||
| title: 'Table of contents', | ||
| headingSelector: 'h2, h3', | ||
| }, | ||
| }, | ||
| controls: { | ||
| matchers: { | ||
| color: /(background|color)$/i, | ||
| date: /Date$/i, | ||
| }, | ||
| }, | ||
| layout: 'fullscreen', | ||
| status: { | ||
| type: 'legacy', | ||
| statuses: { | ||
| released: { | ||
| background: 'rgb(50, 210, 182)', | ||
| color: '#ffffff', | ||
| description: 'This component is stable and released', | ||
| }, | ||
| in_progress: { | ||
| background: 'rgb(154, 126, 254)', | ||
| color: '#ffffff', | ||
| description: 'This component is in progress', | ||
| }, | ||
| planned: { | ||
| background: 'rgb(254, 194, 50)', | ||
| color: '#ffffff', | ||
| description: 'This component is planned to be revamped', | ||
| }, | ||
| legacy: { | ||
| background: 'rgb(129, 132, 132)', | ||
| color: '#ffffff', | ||
| description: 'This is a legacy component', | ||
| }, | ||
| deprecated: { | ||
| background: 'rgb(153, 33, 54)', | ||
| color: '#ffffff', | ||
| description: 'This is a legacy component', | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default preview; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| /* (c) Copyright Frontify Ltd., all rights reserved. */ | ||
|
|
||
| module.exports = { | ||
| plugins: { | ||
| autoprefixer: {}, | ||
| tailwindcss: {}, | ||
| }, | ||
| }; |
Oops, something went wrong.