diff --git a/superset-frontend/.storybook/main.js b/superset-frontend/.storybook/main.js index cf65d312db901..2b94128e5cccb 100644 --- a/superset-frontend/.storybook/main.js +++ b/superset-frontend/.storybook/main.js @@ -36,6 +36,10 @@ module.exports = { ...config.module, rules: customConfig.module.rules, }, + resolve: { + ...config.resolve, + ...customConfig.resolve, + }, plugins: [...config.plugins, ...customConfig.plugins], }), }; diff --git a/superset-frontend/src/components/Icon/icon.stories.jsx b/superset-frontend/src/components/Icon/icon.stories.jsx new file mode 100644 index 0000000000000..ad408e811786b --- /dev/null +++ b/superset-frontend/src/components/Icon/icon.stories.jsx @@ -0,0 +1,86 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React from 'react'; +import { withKnobs, select } from '@storybook/addon-knobs'; +import { styled, supersetTheme } from '@superset-ui/style'; +import Icon, { iconsRegistry } from './'; + +export default { + title: 'Icon', + component: Icon, + decorators: [withKnobs], +}; + +const palette = {}; +Object.entries(supersetTheme.colors).forEach(([familyName, family]) => { + Object.entries(family).forEach(([colorName, colorValue]) => { + palette[`${familyName} / ${colorName}`] = colorValue; + }); +}); + +const colorKnob = { + label: 'Color', + options: { + Default: null, + ...palette, + }, + defaultValue: null, +}; + +const IconSet = styled.div` + display: flex; + flex-direction: row; + flex-wrap: wrap; +`; + +const IconBlock = styled.div` + flex-grow: 0; + flex-shrink: 0; + flex-basis: 10%; + text-align: center; + padding: ${({ theme }) => theme.gridUnit * 2}px; + div { + white-space: nowrap; + font-size: ${({ theme }) => theme.typography.sizes.s}px; + } +`; + +export const SupersetIcon = () => { + return ( + + {Object.keys(iconsRegistry) + .sort() + .map(iconName => ( + + +
{iconName}
+
+ ))} +
+ ); +}; diff --git a/superset-frontend/src/components/Icon.tsx b/superset-frontend/src/components/Icon/index.tsx similarity index 99% rename from superset-frontend/src/components/Icon.tsx rename to superset-frontend/src/components/Icon/index.tsx index 4fdc4b2f145b4..7eb3916354546 100644 --- a/superset-frontend/src/components/Icon.tsx +++ b/superset-frontend/src/components/Icon/index.tsx @@ -64,7 +64,7 @@ type IconName = | 'share' | 'warning'; -const iconsRegistry: Record< +export const iconsRegistry: Record< IconName, React.ComponentType> > = { diff --git a/superset/templates/email/alert.txt b/superset/templates/email/alert.txt index 663b51fb59cc7..0a2c623b91535 100644 --- a/superset/templates/email/alert.txt +++ b/superset/templates/email/alert.txt @@ -23,4 +23,4 @@

Click here or the image below to view the chart related to this alert.

{{label}} - \ No newline at end of file +