diff --git a/components/documentation/library/.storybook/addons/theme-mode/.babelrc b/components/documentation/library/.storybook/addons/theme-mode/.babelrc new file mode 100644 index 0000000..2250a39 --- /dev/null +++ b/components/documentation/library/.storybook/addons/theme-mode/.babelrc @@ -0,0 +1,13 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "targets": { + "node": "current" + } + } + ], + "@babel/preset-react" + ] +} diff --git a/components/documentation/library/.storybook/addons/theme-mode/.gitignore b/components/documentation/library/.storybook/addons/theme-mode/.gitignore new file mode 100644 index 0000000..a9f4ed5 --- /dev/null +++ b/components/documentation/library/.storybook/addons/theme-mode/.gitignore @@ -0,0 +1,2 @@ +lib +node_modules \ No newline at end of file diff --git a/components/documentation/library/.storybook/addons/theme-mode/.npmignore b/components/documentation/library/.storybook/addons/theme-mode/.npmignore new file mode 100644 index 0000000..d9755c0 --- /dev/null +++ b/components/documentation/library/.storybook/addons/theme-mode/.npmignore @@ -0,0 +1,2 @@ +src +assets \ No newline at end of file diff --git a/components/documentation/library/.storybook/addons/theme-mode/README.md b/components/documentation/library/.storybook/addons/theme-mode/README.md new file mode 100644 index 0000000..154e897 --- /dev/null +++ b/components/documentation/library/.storybook/addons/theme-mode/README.md @@ -0,0 +1,3 @@ +# storybook addons-theme-mode + +toggles between color-schema and theme-mode \ No newline at end of file diff --git a/components/documentation/library/.storybook/addons/theme-mode/manager.js b/components/documentation/library/.storybook/addons/theme-mode/manager.js new file mode 100644 index 0000000..a7f2e47 --- /dev/null +++ b/components/documentation/library/.storybook/addons/theme-mode/manager.js @@ -0,0 +1 @@ +import './src/manager.js'; diff --git a/components/documentation/library/.storybook/addons/theme-mode/package.json b/components/documentation/library/.storybook/addons/theme-mode/package.json new file mode 100644 index 0000000..d7796a5 --- /dev/null +++ b/components/documentation/library/.storybook/addons/theme-mode/package.json @@ -0,0 +1,63 @@ +{ + "name": "@s-ui/documentation-library-addons-theme-mode", + "version": "6.1.0", + "description": "A storybook addon to show different color-schema for your preview", + "keywords": [ + "addon", + "color-schema", + "react", + "storybook" + ], + "exports": { + "./manager": "./src/manager.js", + "./preview": "./src/preview.js", + "./package.json": "./package.json" + }, + "bundler": { + "exportEntries": [ + "src/index.js" + ], + "managerEntries": [ + "src/manager.js" + ], + "previewEntries": [ + "src/preview.js" + ] + }, + "license": "MIT", + "main": "src/index.js", + "scripts": { + "prepare": "npm run build:js && npm run build:styles", + "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:styles": "cpx './src/**/*.scss' ./lib" + }, + "dependencies": { + "@storybook/addons": "6.1.0", + "@storybook/api": "6.1.0", + "@storybook/client-logger": "6.1.0", + "@storybook/components": "6.1.0", + "@storybook/core-events": "6.1.0", + "@storybook/theming": "6.1.0", + "use-prefers-color-scheme": "1.1.3" + }, + "devDependencies": { + "@babel/core": "7", + "@babel/preset-env": "7", + "@babel/preset-react": "7" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + }, + "publishConfig": { + "access": "public" + } +} diff --git a/components/documentation/library/.storybook/addons/theme-mode/preview.js b/components/documentation/library/.storybook/addons/theme-mode/preview.js new file mode 100644 index 0000000..4e059e3 --- /dev/null +++ b/components/documentation/library/.storybook/addons/theme-mode/preview.js @@ -0,0 +1 @@ +export * from './src/preview.js'; diff --git a/components/documentation/library/.storybook/addons/theme-mode/register.js b/components/documentation/library/.storybook/addons/theme-mode/register.js new file mode 100644 index 0000000..0fa69b2 --- /dev/null +++ b/components/documentation/library/.storybook/addons/theme-mode/register.js @@ -0,0 +1,6 @@ +import { once } from '@storybook/client-logger'; +import './manager.js'; + +once.warn( +'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' +); \ No newline at end of file diff --git a/components/documentation/library/.storybook/addons/theme-mode/src/constants.js b/components/documentation/library/.storybook/addons/theme-mode/src/constants.js new file mode 100644 index 0000000..5673f92 --- /dev/null +++ b/components/documentation/library/.storybook/addons/theme-mode/src/constants.js @@ -0,0 +1,16 @@ +export const ADDON_ID = 'storybook/theme-mode' +export const PARAM_KEY = 'themeMode' + +export const EVENTS = { + UPDATE: `${ADDON_ID}/update` +} + +export const DEFAULT_THEME_MODE_CONFIG = { + default: 'system', + disable: false, + values: [ + {name: 'system', value: undefined}, + {name: 'light', value: 'light'}, + {name: 'dark', value: 'dark'} + ] +} diff --git a/components/documentation/library/.storybook/addons/theme-mode/src/containers/ThemeModeSelector.js b/components/documentation/library/.storybook/addons/theme-mode/src/containers/ThemeModeSelector.js new file mode 100644 index 0000000..e39413b --- /dev/null +++ b/components/documentation/library/.storybook/addons/theme-mode/src/containers/ThemeModeSelector.js @@ -0,0 +1,105 @@ +import React, {Fragment} from 'react' + +import {logger} from '@storybook/client-logger' +import { + Icons, + IconButton, + WithTooltip, + TooltipLinkList +} from '@storybook/components' + +import {DEFAULT_THEME_MODE_CONFIG} from '../constants.js' +import {useThemeMode, useColorSchema} from '../helpers/index.js' + +const createThemeModeSelectorItem = ( + id, + name, + value, + hasSwatch, + change, + active +) => ({ + id: id || name, + title: name, + onClick: () => { + change({selected: value, name}) + }, + value, + active +}) + +const getDisplayedItems = (selectedThemeMode, change) => { + const themeModeSelectorItems = DEFAULT_THEME_MODE_CONFIG.values.map( + ({name, value}) => + createThemeModeSelectorItem( + null, + name, + value, + true, + change, + name === selectedThemeMode + ) + ) + + if (selectedThemeMode !== 'system') { + return [...themeModeSelectorItems] + } + + return themeModeSelectorItems +} + +export const ThemeModeSelector = () => { + const [themeModeConfig, setThemeModeConfig] = useThemeMode() + + if (Array.isArray(themeModeConfig)) { + logger.warn( + 'Addon ThemeMode api has changed in Storybook 6.0. Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md' + ) + } + + const onThemeModeChange = value => { + setThemeModeConfig(value) + } + + const mainElement = document.querySelector('#storybook-preview-iframe') + const themeMode = useColorSchema() + if (mainElement) { + const element = mainElement.contentDocument.querySelector('.sb-show-main') + if (element) { + if (element.getAttribute('data-theme-mode')) { + element.removeAttribute('data-theme-mode') + } + element.setAttribute('data-theme-mode', themeMode) + } + } + + return ( + + { + return ( + { + if (themeModeConfig !== selected) { + onThemeModeChange(selected) + } + onHide() + })} + /> + ) + }} + > + + + + + + ) +} diff --git a/components/documentation/library/.storybook/addons/theme-mode/src/containers/index.js b/components/documentation/library/.storybook/addons/theme-mode/src/containers/index.js new file mode 100644 index 0000000..3eeb7b7 --- /dev/null +++ b/components/documentation/library/.storybook/addons/theme-mode/src/containers/index.js @@ -0,0 +1 @@ +export {ThemeModeSelector} from './ThemeModeSelector.js' diff --git a/components/documentation/library/.storybook/addons/theme-mode/src/helpers/index.js b/components/documentation/library/.storybook/addons/theme-mode/src/helpers/index.js new file mode 100644 index 0000000..c0d1df2 --- /dev/null +++ b/components/documentation/library/.storybook/addons/theme-mode/src/helpers/index.js @@ -0,0 +1,24 @@ +import {useAddonState} from '@storybook/api' +import usePrefersColorScheme from 'use-prefers-color-scheme' + +import { + PARAM_KEY as THEME_MODE_PARAM_KEY, + DEFAULT_THEME_MODE_CONFIG +} from '../constants' + +export const useThemeMode = () => { + const [themeMode, setThemeMode] = useAddonState( + THEME_MODE_PARAM_KEY, + DEFAULT_THEME_MODE_CONFIG.default + ) + return [themeMode, setThemeMode] +} + +export const useColorSchema = () => { + const [themeMode] = useAddonState(THEME_MODE_PARAM_KEY) + const prefersColorScheme = usePrefersColorScheme() + if (themeMode === 'system') { + return prefersColorScheme === 'dark' ? 'dark' : 'light' + } + return themeMode +} diff --git a/components/documentation/library/.storybook/addons/theme-mode/src/index.js b/components/documentation/library/.storybook/addons/theme-mode/src/index.js new file mode 100644 index 0000000..9860c5b --- /dev/null +++ b/components/documentation/library/.storybook/addons/theme-mode/src/index.js @@ -0,0 +1,5 @@ +if (module && module.hot && module.hot.decline) { + module.hot.decline(); +} + +export default {}; \ No newline at end of file diff --git a/components/documentation/library/.storybook/addons/theme-mode/src/manager.js b/components/documentation/library/.storybook/addons/theme-mode/src/manager.js new file mode 100644 index 0000000..cf04af8 --- /dev/null +++ b/components/documentation/library/.storybook/addons/theme-mode/src/manager.js @@ -0,0 +1,21 @@ +import React, {Fragment} from 'react' +import {addons, types} from '@storybook/addons' + +import {ADDON_ID} from './constants' +import {ThemeModeSelector} from './containers/index' + +addons.register(ADDON_ID, () => { + addons.add(ADDON_ID, { + title: 'ThemeMode', + type: types.TOOL, + match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), + render: () => { + return ( + + + + ) + } + }) + +}) diff --git a/components/documentation/library/.storybook/addons/theme-mode/src/preview.js b/components/documentation/library/.storybook/addons/theme-mode/src/preview.js new file mode 100644 index 0000000..30d82cc --- /dev/null +++ b/components/documentation/library/.storybook/addons/theme-mode/src/preview.js @@ -0,0 +1,5 @@ +import {DEFAULT_THEME_MODE_CONFIG} from './constants.js' + +export const parameters = { + themeMode: {...DEFAULT_THEME_MODE_CONFIG} +} diff --git a/components/documentation/library/.storybook/main.js b/components/documentation/library/.storybook/main.js index d958807..8c623ee 100644 --- a/components/documentation/library/.storybook/main.js +++ b/components/documentation/library/.storybook/main.js @@ -6,6 +6,7 @@ module.exports = { addons: [ '@storybook/addon-links', '@storybook/addon-essentials', + './addons/theme-mode/manager.js', { name: '@storybook/preset-scss', options: { diff --git a/components/documentation/library/.storybook/preview.js b/components/documentation/library/.storybook/preview.js index 4284b66..0ce6e48 100644 --- a/components/documentation/library/.storybook/preview.js +++ b/components/documentation/library/.storybook/preview.js @@ -1,5 +1,24 @@ -// import '../src/index.scss' +import '../src/index.scss' export const parameters = { - actions: {argTypesRegex: '^on[A-Z].*'} + actions: {argTypesRegex: '^on[A-Z].*'}, + backgrounds: { + default: 'light', + values: [ + { + name: 'light', + value: 'var(--c-sui-studio-doc-neutral0, #f5f5f5)' + }, + { + name: 'dark', + value: 'var(--c-sui-studio-doc-neutral10, #333333)' + } + ] + } } + +export const decorators = [ + (Story, params) => { + return + } +] diff --git a/components/documentation/library/README.md b/components/documentation/library/README.md index 4187b6a..f933dcb 100644 --- a/components/documentation/library/README.md +++ b/components/documentation/library/README.md @@ -68,6 +68,9 @@ > #### [**FlatColorIcon**](https://github.com/SUI-Components/docs-components/blob/master/components/documentation/library/src/components/FlatColorIcon/FlatColorIcon.md) > Flat Color Icon DOC styled +> #### [**MaterialDesignIcon**](https://github.com/SUI-Components/docs-components/blob/master/components/documentation/library/src/components/MaterialDesignIcon/MaterialDesignIcon.md) +> Material Design Icon DOC styled + > #### [**Input**](https://github.com/SUI-Components/docs-components/blob/master/components/documentation/library/src/components/Input/Input.md) > HTML `input` element DOC styled diff --git a/components/documentation/library/package.json b/components/documentation/library/package.json index 78a4c72..4d846f1 100644 --- a/components/documentation/library/package.json +++ b/components/documentation/library/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/documentation-library", - "version": "2.0.0", + "version": "2.0.5", "description": "", "main": "lib/main.js", "scripts": { diff --git a/components/documentation/library/src/components/Icon/MaterialDesignIcon.js b/components/documentation/library/src/components/Icon/MaterialDesignIcon.js new file mode 100644 index 0000000..aa133d5 --- /dev/null +++ b/components/documentation/library/src/components/Icon/MaterialDesignIcon.js @@ -0,0 +1,86 @@ +/* eslint react/prop-types: 0 */ +import React, {useState, useEffect, forwardRef} from 'react' +import PropTypes from 'prop-types' +import ExtraPropTypes from 'react-extra-prop-types' +import cx from 'classnames' +import {IconContext} from 'react-icons' + +import Base from '../Base.core' + +import './MaterialDesignIcon.scss' + +/** + * Material Design Icon DOC styled + */ +const MaterialDesignIcon = forwardRef( + ( + { + className, + icon, + color, + children, + elementType = 'span', + fullWidth = true, + title, + size, + ...props + }, + forwardedRef + ) => { + const [IconElement, setIconElement] = useState(() => () => null) + useEffect(() => { + if (icon) { + import('react-icons/md') + .then(module => module[icon]) + .then(Element => { + setIconElement(() => Element || IconElement) + }) + } + }, [icon, IconElement]) + return ( + + + + + + ) + } +) +MaterialDesignIcon.displayName = 'MaterialDesignIcon' +MaterialDesignIcon.propTypes = { + /** + * icon color + */ + color: ExtraPropTypes.color, + /** + * Icon name + */ + icon: PropTypes.string.isRequired, + /** + * icon size + */ + size: PropTypes.string, + /** + * Icon description for accessibility + */ + title: PropTypes.string +} +MaterialDesignIcon.defaultProps = {} + +export default MaterialDesignIcon + +export {MaterialDesignIcon} diff --git a/components/documentation/library/src/components/Icon/MaterialDesignIcon.md b/components/documentation/library/src/components/Icon/MaterialDesignIcon.md new file mode 100644 index 0000000..1da8cd5 --- /dev/null +++ b/components/documentation/library/src/components/Icon/MaterialDesignIcon.md @@ -0,0 +1,30 @@ +# MaterialDesignIcon +Material Design Icon DOC styled + +## Installation +`npm install @s-ui/documentation-library` + +## Usage + +```js +// import MaterialDesignIcon DOC component +import { MaterialDesignIcon } from '@s-ui/documentation-library/lib/components/MaterialDesignIcon/MaterialDesignIcon.js' +``` + +or + +```js +// import all DOC components you need +import { MaterialDesignIcon } from '@s-ui/documentation-library' +``` + +## Prop-Types + +| Name | Description | Values | Default | Required | +| ---: |:---:| ---:| ---: |:---: | +| color | icon color | | | [ ] | +| icon | Icon name | | | [x] | +| size | icon size | | | [ ] | +| title | Icon description for accessibility | | | [ ] | +| elementType | undefined | | | [ ] | +| fullWidth | undefined | | | [ ] | diff --git a/components/documentation/library/src/components/Icon/MaterialDesignIcon.scss b/components/documentation/library/src/components/Icon/MaterialDesignIcon.scss new file mode 100644 index 0000000..46583d4 --- /dev/null +++ b/components/documentation/library/src/components/Icon/MaterialDesignIcon.scss @@ -0,0 +1,9 @@ +@import '../../styles/color-palete'; +@import '../../styles/font'; +@import '../../styles/spacing'; + +@import '../../styles/globals'; + +@import '../Base'; + +@import './Icon.styles'; diff --git a/components/documentation/library/src/components/Icon/MaterialDesignIcon.spec.js b/components/documentation/library/src/components/Icon/MaterialDesignIcon.spec.js new file mode 100644 index 0000000..b6cad0b --- /dev/null +++ b/components/documentation/library/src/components/Icon/MaterialDesignIcon.spec.js @@ -0,0 +1,97 @@ +/* global expect */ +import React, {createRef} from 'react' +import ReactDOM from 'react-dom' + +import {MaterialDesignIcon} from './MaterialDesignIcon' + +import setupEnvironment from '../../helpers/setupEnvironment' + +describe('components', () => { + describe('MaterialDesignIcon', () => { + describe('default', () => { + const Component = MaterialDesignIcon + const setup = setupEnvironment(Component) + + test('should render without crashing', () => { + // Given + const props = {icon: 'foobar'} + + // When + const component = + + // Then + const div = document.createElement('div') + ReactDOM.render(component, div) + ReactDOM.unmountComponentAtNode(div) + }) + + test('should NOT render null', () => { + // Given + const props = {icon: 'foobar'} + + // When + const {container} = setup(props) + + // Then + expect(container.innerHTML).toBeString() + expect(container.innerHTML).not.toHaveLength(0) + }) + + test('should have propTypes and defaultProps ', () => { + // Given + const component = Component + + // When + + // Then + expect(component.hasOwnProperty('propTypes')).toBeTruthy() + expect(component.hasOwnProperty('defaultProps')).toBeTruthy() + }) + + test('should have proper displayName attribute', () => { + // Given + // const props = {} + + // When + const component = Component + + // Then + expect(component.displayName).toBeString() + expect(component.displayName).not.toHaveLength(0) + expect(component.displayName).toMatchSnapshot() + }) + + describe('forwardRef', () => { + test('should have reference', () => { + // Given + const props = {icon: 'foobar'} + const ref = createRef() + + // When + const component = + const div = document.createElement('div') + ReactDOM.render(component, div) + + // Then + expect(ref.current).not.toBe(undefined) + expect(ref.current.nodeName).toBe('SPAN') + }) + + test('should have defined elementType reference', () => { + // Given + const props = {icon: 'foobar', elementType: 'div'} + const ref = createRef() + + // When + const component = + const div = document.createElement('div') + ReactDOM.render(component, div) + + // Then + expect(ref.current).not.toBe(undefined) + expect(ref.current.nodeName).toBe('DIV') + }) + }) + }) + }) +}) diff --git a/components/documentation/library/src/components/Icon/MaterialDesignIcon.stories.js b/components/documentation/library/src/components/Icon/MaterialDesignIcon.stories.js new file mode 100644 index 0000000..1fdabe4 --- /dev/null +++ b/components/documentation/library/src/components/Icon/MaterialDesignIcon.stories.js @@ -0,0 +1,79 @@ +import React from 'react' +import * as materialDesignIcons from 'react-icons/md' +import {Grid, Cell, Small} from '../../main' + +import MaterialDesignIcon from './MaterialDesignIcon' + +const materialDesignIconOptions = Object.getOwnPropertyNames( + materialDesignIcons +).filter(k => k !== '__esModule') + +export default { + title: 'Components/Icon/MaterialDesignIcon', + component: MaterialDesignIcon, + argTypes: { + mode: { + control: { + type: 'select', + options: { + undefined: undefined, + light: 'light', + dark: 'dark' + } + } + }, + icon: { + control: { + type: 'select', + options: materialDesignIconOptions + } + } + } +} + +const Template = props => + +export const Default = Template.bind({}) + +Default.args = { + icon: materialDesignIconOptions[0] +} + +export const IconList = props => { + return ( + + {materialDesignIconOptions.map((icon, index) => ( + + + + + + + {icon} + + + + ))} + + ) +} + +IconList.args = { + size: '3em' +} + +export const Size = props => { + return ( + + {[...Array(5).keys()].map(index => ( + + + + ))} + + ) +} + +Size.args = { + icon: materialDesignIconOptions[0] +} diff --git a/components/documentation/library/src/components/Icon/VSCodeIcon.js b/components/documentation/library/src/components/Icon/VSCodeIcon.js new file mode 100644 index 0000000..4b7bf81 --- /dev/null +++ b/components/documentation/library/src/components/Icon/VSCodeIcon.js @@ -0,0 +1,86 @@ +/* eslint react/prop-types: 0 */ +import React, {useState, useEffect, forwardRef} from 'react' +import PropTypes from 'prop-types' +import ExtraPropTypes from 'react-extra-prop-types' +import cx from 'classnames' +import {IconContext} from 'react-icons' + +import Base from '../Base.core' + +import './MaterialDesignIcon.scss' + +/** + * VSCode Icon DOC styled + */ +const VSCodeIcon = forwardRef( + ( + { + className, + icon, + color, + children, + elementType = 'span', + fullWidth = true, + title, + size, + ...props + }, + forwardedRef + ) => { + const [IconElement, setIconElement] = useState(() => () => null) + useEffect(() => { + if (icon) { + import('react-icons/vsc') + .then(module => module[icon]) + .then(Element => { + setIconElement(() => Element || IconElement) + }) + } + }, [icon, IconElement]) + return ( + + + + + + ) + } +) +VSCodeIcon.displayName = 'VSCodeIcon' +VSCodeIcon.propTypes = { + /** + * icon color + */ + color: ExtraPropTypes.color, + /** + * Icon name + */ + icon: PropTypes.string.isRequired, + /** + * icon size + */ + size: PropTypes.string, + /** + * Icon description for accessibility + */ + title: PropTypes.string +} +VSCodeIcon.defaultProps = {} + +export default VSCodeIcon + +export {VSCodeIcon} diff --git a/components/documentation/library/src/components/Icon/VSCodeIcon.md b/components/documentation/library/src/components/Icon/VSCodeIcon.md new file mode 100644 index 0000000..85da5a0 --- /dev/null +++ b/components/documentation/library/src/components/Icon/VSCodeIcon.md @@ -0,0 +1,30 @@ +# VSCodeIcon +Material Design Icon DOC styled + +## Installation +`npm install @s-ui/documentation-library` + +## Usage + +```js +// import MaterialDesignIcon DOC component +import { VSCodeIcon } from '@s-ui/documentation-library/lib/components/MaterialDesignIcon/MaterialDesignIcon.js' +``` + +or + +```js +// import all DOC components you need +import { VSCodeIcon } from '@s-ui/documentation-library' +``` + +## Prop-Types + +| Name | Description | Values | Default | Required | +| ---: |:---:| ---:| ---: |:---: | +| color | icon color | | | [ ] | +| icon | Icon name | | | [x] | +| size | icon size | | | [ ] | +| title | Icon description for accessibility | | | [ ] | +| elementType | undefined | | | [ ] | +| fullWidth | undefined | | | [ ] | diff --git a/components/documentation/library/src/components/Icon/VSCodeIcon.scss b/components/documentation/library/src/components/Icon/VSCodeIcon.scss new file mode 100644 index 0000000..46583d4 --- /dev/null +++ b/components/documentation/library/src/components/Icon/VSCodeIcon.scss @@ -0,0 +1,9 @@ +@import '../../styles/color-palete'; +@import '../../styles/font'; +@import '../../styles/spacing'; + +@import '../../styles/globals'; + +@import '../Base'; + +@import './Icon.styles'; diff --git a/components/documentation/library/src/components/Icon/VSCodeIcon.spec.js b/components/documentation/library/src/components/Icon/VSCodeIcon.spec.js new file mode 100644 index 0000000..07a8252 --- /dev/null +++ b/components/documentation/library/src/components/Icon/VSCodeIcon.spec.js @@ -0,0 +1,97 @@ +/* global expect */ +import React, {createRef} from 'react' +import ReactDOM from 'react-dom' + +import {VSCodeIcon} from './VSCodeIcon' + +import setupEnvironment from '../../helpers/setupEnvironment' + +describe('components', () => { + describe('VSCodeIcon', () => { + describe('default', () => { + const Component = VSCodeIcon + const setup = setupEnvironment(Component) + + test('should render without crashing', () => { + // Given + const props = {icon: 'foobar'} + + // When + const component = + + // Then + const div = document.createElement('div') + ReactDOM.render(component, div) + ReactDOM.unmountComponentAtNode(div) + }) + + test('should NOT render null', () => { + // Given + const props = {icon: 'foobar'} + + // When + const {container} = setup(props) + + // Then + expect(container.innerHTML).toBeString() + expect(container.innerHTML).not.toHaveLength(0) + }) + + test('should have propTypes and defaultProps ', () => { + // Given + const component = Component + + // When + + // Then + expect(component.hasOwnProperty('propTypes')).toBeTruthy() + expect(component.hasOwnProperty('defaultProps')).toBeTruthy() + }) + + test('should have proper displayName attribute', () => { + // Given + // const props = {} + + // When + const component = Component + + // Then + expect(component.displayName).toBeString() + expect(component.displayName).not.toHaveLength(0) + expect(component.displayName).toMatchSnapshot() + }) + + describe('forwardRef', () => { + test('should have reference', () => { + // Given + const props = {icon: 'foobar'} + const ref = createRef() + + // When + const component = + const div = document.createElement('div') + ReactDOM.render(component, div) + + // Then + expect(ref.current).not.toBe(undefined) + expect(ref.current.nodeName).toBe('SPAN') + }) + + test('should have defined elementType reference', () => { + // Given + const props = {icon: 'foobar', elementType: 'div'} + const ref = createRef() + + // When + const component = + const div = document.createElement('div') + ReactDOM.render(component, div) + + // Then + expect(ref.current).not.toBe(undefined) + expect(ref.current.nodeName).toBe('DIV') + }) + }) + }) + }) +}) diff --git a/components/documentation/library/src/components/Icon/VSCodeIcon.stories.js b/components/documentation/library/src/components/Icon/VSCodeIcon.stories.js new file mode 100644 index 0000000..9093783 --- /dev/null +++ b/components/documentation/library/src/components/Icon/VSCodeIcon.stories.js @@ -0,0 +1,79 @@ +import React from 'react' +import * as vsCodeIcons from 'react-icons/vsc' +import {Grid, Cell, Small} from '../../main' + +import VSCodeIcon from './VSCodeIcon' + +const vsCodeIconOptions = Object.getOwnPropertyNames( + vsCodeIcons +).filter(k => k !== '__esModule') + +export default { + title: 'Components/Icon/VSCodeIcon', + component: VSCodeIcon, + argTypes: { + mode: { + control: { + type: 'select', + options: { + undefined: undefined, + light: 'light', + dark: 'dark' + } + } + }, + icon: { + control: { + type: 'select', + options: vsCodeIconOptions + } + } + } +} + +const Template = props => + +export const Default = Template.bind({}) + +Default.args = { + icon: vsCodeIconOptions[0] +} + +export const IconList = props => { + return ( + + {vsCodeIconOptions.map((icon, index) => ( + + + + + + + {icon} + + + + ))} + + ) +} + +IconList.args = { + size: '3em' +} + +export const Size = props => { + return ( + + {[...Array(5).keys()].map(index => ( + + + + ))} + + ) +} + +Size.args = { + icon: vsCodeIconOptions[0] +} diff --git a/components/documentation/library/src/components/Icon/__snapshots__/MaterialDesignIcon.spec.js.snap b/components/documentation/library/src/components/Icon/__snapshots__/MaterialDesignIcon.spec.js.snap new file mode 100644 index 0000000..62be867 --- /dev/null +++ b/components/documentation/library/src/components/Icon/__snapshots__/MaterialDesignIcon.spec.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components MaterialDesignIcon default should have proper displayName attribute 1`] = `"MaterialDesignIcon"`; diff --git a/components/documentation/library/src/components/Radio/Radio.js b/components/documentation/library/src/components/Radio/Radio.js index 16b8fff..1d68b79 100644 --- a/components/documentation/library/src/components/Radio/Radio.js +++ b/components/documentation/library/src/components/Radio/Radio.js @@ -67,7 +67,6 @@ const Radio = forwardRef( onClick={onClickHandler} onChange={onChange} checked={checkedState} - aria-label={label || value} value={value} name={name || radioGroupContext.name} ref={forwardedRef} diff --git a/components/documentation/library/src/index.js b/components/documentation/library/src/index.js index a2be2f2..a4a361f 100644 --- a/components/documentation/library/src/index.js +++ b/components/documentation/library/src/index.js @@ -12,6 +12,8 @@ import {BootstrapIcon} from './components/Icon/BootstrapIcon' import {DevIcon} from './components/Icon/DevIcon' import {FeatherIcon} from './components/Icon/FeatherIcon' import {FlatColorIcon} from './components/Icon/FlatColorIcon' +import {MaterialDesignIcon} from './components/Icon/MaterialDesignIcon' +import {VSCodeIcon} from './components/Icon/VSCodeIcon' import {Input} from './components/Input/Input.js' import {Label} from './components/Label/Label.js' import {UnorderedList, OrderedList, ListItem} from './components/List/List.js' @@ -55,6 +57,8 @@ export default class DocumentationLibrary { static DevIcon = DevIcon static FeatherIcon = FeatherIcon static FlatColorIcon = FlatColorIcon + static MaterialDesignIcon = MaterialDesignIcon + static VSCodeIcon = VSCodeIcon static Input = Input static Label = Label static UnorderedList = UnorderedList diff --git a/components/documentation/library/src/main.js b/components/documentation/library/src/main.js index 0bd7b61..d2b889e 100644 --- a/components/documentation/library/src/main.js +++ b/components/documentation/library/src/main.js @@ -12,6 +12,8 @@ export {BootstrapIcon} from './components/Icon/BootstrapIcon' export {DevIcon} from './components/Icon/DevIcon' export {FeatherIcon} from './components/Icon/FeatherIcon' export {FlatColorIcon} from './components/Icon/FlatColorIcon' +export {MaterialDesignIcon} from './components/Icon/MaterialDesignIcon' +export {VSCodeIcon} from './components/Icon/VSCodeIcon' export {Input} from './components/Input/Input.js' export {Label} from './components/Label/Label.js' export {UnorderedList, OrderedList, ListItem} from './components/List/List.js'