diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Align.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Align.png new file mode 100644 index 0000000000..b81e97e968 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Align.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Align_Content.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Align_Content.png new file mode 100644 index 0000000000..d9dc71bed1 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Align_Content.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Align_Items.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Align_Items.png new file mode 100644 index 0000000000..1576b71c19 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Align_Items.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Basis.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Basis.png new file mode 100644 index 0000000000..6a6c60bbc0 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Basis.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Default_Story.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Default_Story.png new file mode 100644 index 0000000000..f93a9cee88 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Default_Story.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Direction.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Direction.png new file mode 100644 index 0000000000..45e496db60 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Direction.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Grow.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Grow.png new file mode 100644 index 0000000000..6a6c60bbc0 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Grow.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Justify_Content.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Justify_Content.png new file mode 100644 index 0000000000..ba1eb719f7 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Justify_Content.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Order.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Order.png new file mode 100644 index 0000000000..d486f0149c Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Order.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Shrink.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Shrink.png new file mode 100644 index 0000000000..6a6c60bbc0 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Shrink.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Wrap.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Wrap.png new file mode 100644 index 0000000000..d9dc71bed1 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Flex_Wrap.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Align.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Align.png new file mode 100644 index 0000000000..fd3fbf0ab7 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Align.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Align_Content.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Align_Content.png new file mode 100644 index 0000000000..37a492225f Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Align_Content.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Align_Items.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Align_Items.png new file mode 100644 index 0000000000..3d54965e59 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Align_Items.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Basis.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Basis.png new file mode 100644 index 0000000000..79a710f5c2 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Basis.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Default_Story.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Default_Story.png new file mode 100644 index 0000000000..d64a72e2bf Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Default_Story.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Direction.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Direction.png new file mode 100644 index 0000000000..ff0fa3eda8 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Direction.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Grow.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Grow.png new file mode 100644 index 0000000000..01ff6fcbf2 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Grow.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Justify_Content.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Justify_Content.png new file mode 100644 index 0000000000..d7ebb865cd Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Justify_Content.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Order.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Order.png new file mode 100644 index 0000000000..ab4e1a652f Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Order.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Shrink.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Shrink.png new file mode 100644 index 0000000000..01ff6fcbf2 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Shrink.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Wrap.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Wrap.png new file mode 100644 index 0000000000..3a5f276db3 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Flex_Wrap.png differ diff --git a/packages/fuselage/src/components/Flex/index.js b/packages/fuselage/src/components/Flex/index.js new file mode 100644 index 0000000000..7e065448d9 --- /dev/null +++ b/packages/fuselage/src/components/Flex/index.js @@ -0,0 +1,81 @@ +import PropTypes from 'prop-types'; +import React from 'react'; + +import { useStylingProvider } from '../../styles'; + +export function FlexContainer({ children, direction, wrap, justifyContent, alignItems, alignContent }) { + const Provider = useStylingProvider({ + style: { + display: 'flex', + flexDirection: direction, + flexWrap: wrap, + justifyContent, + alignItems, + alignContent, + }, + depth: 1, + }); + + return ; +} + +FlexContainer.displayName = 'Flex.Container'; + +FlexContainer.propTypes = { + direction: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']), + wrap: PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']), + justifyContent: PropTypes.oneOf([ + 'flex-start', 'flex-end', 'center', + 'space-between', 'space-around', 'space-evenly', + 'start', 'end', 'left', 'right', + 'flex-start safe', 'flex-end safe', 'center safe', + 'space-between safe', 'space-around safe', 'space-evenly safe', + 'start safe', 'end safe', 'left safe', 'right safe', + ]), + alignItems: PropTypes.oneOf([ + 'stretch', 'flex-start', 'flex-end', 'center', + 'baseline', 'first baseline', 'last baseline', + 'start', 'end', 'self-start', 'self-end', + 'stretch safe', 'flex-start safe', 'flex-end safe', 'center safe', + 'baseline safe', 'first baseline safe', 'last baseline safe', + 'start safe', 'end safe', 'self-start safe', 'self-end safe', + ]), + alignContent: PropTypes.oneOf([ + 'flex-start', 'flex-end', 'center', + 'space-between', 'space-around', 'space-evenly', 'stretch', + 'start', 'end', 'baseline', 'first baseline', 'last baseline', + 'flex-start safe', 'flex-end safe', 'center safe', + 'space-between safe', 'space-around safe', 'space-evenly safe', 'stretch safe', + 'start safe', 'end safe', 'baseline safe', 'first baseline safe', 'last baseline safe', + ]), +}; + +export function FlexItem({ children, order, grow, shrink, basis, align }) { + const Provider = useStylingProvider({ + style: { + order, + flexGrow: grow, + flexShrink: shrink, + flexBasis: basis, + alignSelf: align, + }, + depth: 1, + }); + + return ; +} + +FlexItem.displayName = 'Flex.Item'; + +FlexItem.propTypes = { + order: PropTypes.number, + grow: PropTypes.number, + shrink: PropTypes.number, + basis: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.oneOf(['auto'])]), + align: PropTypes.oneOf(['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch']), +}; + +export const Flex = { + Container: FlexContainer, + Item: FlexItem, +}; diff --git a/packages/fuselage/src/components/Flex/spec.js b/packages/fuselage/src/components/Flex/spec.js new file mode 100644 index 0000000000..eca0ad602b --- /dev/null +++ b/packages/fuselage/src/components/Flex/spec.js @@ -0,0 +1,20 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import { Flex } from '../..'; + +describe('Flex.Container', () => { + it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + ReactDOM.unmountComponentAtNode(div); + }); +}); + +describe('Flex.Item', () => { + it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + ReactDOM.unmountComponentAtNode(div); + }); +}); diff --git a/packages/fuselage/src/components/Flex/stories.mdx b/packages/fuselage/src/components/Flex/stories.mdx new file mode 100644 index 0000000000..8217f380c7 --- /dev/null +++ b/packages/fuselage/src/components/Flex/stories.mdx @@ -0,0 +1,210 @@ +import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks'; + +import { Box, Flex, Tile } from '../..'; + + + +# Flex + + + + + + {Array.from({ length: 3 }).map((_, i) => + + #{i + 1} + + )} + + + + + +### Flex.Container + + + + +### Flex.Item + + + +## Direction + + + + + + {Array.from({ length: 3 }).map((_, i) => + + #{i + 1} + + )} + + + + + +## Wrap + + + + + + {Array.from({ length: 12 }).map((_, i) => + + #{i + 1} + + )} + + + + + +## Justify content + + + + + + {Array.from({ length: 3 }).map((_, i) => + + #{i + 1} + + )} + + + + + +## Align items + + + + + + {Array.from({ length: 3 }).map((_, i) => + + #{i + 1} + + )} + + + + + +## Align content + + + + + + {Array.from({ length: 12 }).map((_, i) => + + #{i + 1} + + )} + + + + + +## Order + + + + + + + #1 + + + #2 + + + #3 + + + + + + +## Grow + + + + + + + #1 + + + #2 + + + #3 + + + + + + +## Shrink + + + + + + + #1 + + + #2 + + + #3 + + + + + + +## Basis + + + + + + + #1 + + + #2 + + + #3 + + + + + + +## Align + + + + + + + #1 + + + #2 + + + #3 + + + + + diff --git a/packages/fuselage/src/components/index.js b/packages/fuselage/src/components/index.js index 1ce52c8a7b..a42c594ab9 100644 --- a/packages/fuselage/src/components/index.js +++ b/packages/fuselage/src/components/index.js @@ -7,6 +7,7 @@ export * from './CheckBox'; export * from './EmailInput'; export * from './Field'; export * from './FieldGroup'; +export * from './Flex'; export * from './Headline'; export * from './Icon'; export * from './InputBox'; diff --git a/packages/fuselage/src/styles/index.js b/packages/fuselage/src/styles/index.js index 019b85d491..ee4a117e20 100644 --- a/packages/fuselage/src/styles/index.js +++ b/packages/fuselage/src/styles/index.js @@ -4,6 +4,18 @@ import css from '../index.scss'; const StylingContext = createContext([]); +export const useStylingProvider = (props) => { + const ancestorStylingProps = useContext(StylingContext); + + const stylingProps = [ + ...ancestorStylingProps.filter(({ depth }) => depth === undefined), + ...ancestorStylingProps.filter(({ depth }) => depth > 0), + props, + ]; + + return ({ children }) => ; +}; + export const createStylingComponent = (fn) => function StylingComponent(props) { const ancestorStylingProps = useContext(StylingContext);