diff --git a/package.json b/package.json index 96d9222d..c7319af0 100644 --- a/package.json +++ b/package.json @@ -74,8 +74,7 @@ "react-dom": "^16.12.0", "react-modal": "^3.12.1", "react-popper": "^2.2.3", - "react-tracking": "^8.1.0", - "styled-components": "^5.3.3" + "react-tracking": "^8.1.0" }, "devDependencies": { "@babel/cli": "^7.8.4", @@ -150,7 +149,6 @@ "storybook": "7.4.1", "storybook-addon-designs": "6.3.1", "style-loader": "^1.1.3", - "styled-components": "^5.3.3", "typescript": "^4.9.5", "webpack": "^5.80.0", "yalc": "^1.0.0-pre.53" @@ -161,8 +159,7 @@ "jackspeak": "2.1.1", "make-dir": "4.0.0", "normalize-package-data": "^3.0.0", - "semver": "^7.5.3", - "styled-components": "^5" + "semver": "^7.5.3" }, "description": "UI Storybook design system", "files": [ diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap index 9c9b8a9b..f1dbc7d9 100644 --- a/spec/__snapshots__/Storyshots.test.js.snap +++ b/spec/__snapshots__/Storyshots.test.js.snap @@ -13519,7 +13519,19 @@ exports[`Storyshots Components/Table Default 1`] = ` exports[`Storyshots Components/Table Loading Custom Columns 1`] = ` Array [
,
,
,
,
,
,
,
,
,
( + render: ({ ...args }) => ( @@ -39,7 +39,7 @@ export const FlexDirection: Story = { container: true, flexDirection: 'column', }, - render: ({ children, ...args }) => ( + render: ({ ...args }) => ( @@ -54,7 +54,7 @@ export const JustifyContent: Story = { flexDirection: 'row', justifyContent: 'space-between', }, - render: ({ children, ...args }) => ( + render: ({ ...args }) => ( @@ -68,7 +68,7 @@ export const AlignItems: Story = { container: true, alignItems: 'center', }, - render: ({ children, ...args }) => ( + render: ({ ...args }) => ( diff --git a/src/Flex/Flex.tsx b/src/Flex/Flex.tsx index 48c1de8a..3eb5eee5 100644 --- a/src/Flex/Flex.tsx +++ b/src/Flex/Flex.tsx @@ -1,5 +1,7 @@ -import React, { ReactNode, ElementType } from 'react'; -import { FlexWrapper } from './FlexWrapper.styles'; +import { ReactNode, ElementType, createElement } from 'react'; +import classNames from 'classnames'; + +import styles from './Flex.module.scss'; export interface FlexProps { alignItems?: 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'initial' | 'inherit'; @@ -43,7 +45,7 @@ export interface FlexProps { const Flex = ({ alignItems, alignSelf, - as, + as = 'div', className, children, container, @@ -60,29 +62,39 @@ const Flex = ({ maxWidth, width, ...props -}: FlexProps) => ( - - {children} - -); +}: FlexProps) => { + // Defined flex properties as strings + const flexClasses = [ + container ? styles[`flex-container`] : styles.container, + alignItems && styles[`align-items-${alignItems}`], + alignSelf && styles[`align-self-${alignSelf}`], + flexDirection && styles[`flex-direction-${flexDirection}`], + flexWrap && styles[`flex-wrap-${flexWrap}`], + justifyContent && styles[`justify-content-${justifyContent}`], + justifySelf && styles[`justify-self-${justifySelf}`], + ].filter(Boolean).join(' '); + + // Variable flex properties defined by consumer + const style = { + flex, + flexBasis, + flexGrow, + flexShrink, + height, + maxHeight, + maxWidth, + width, + }; + + return createElement( + as, + { + className: classNames('Flex', className, flexClasses), + style, + ...props, + }, + children, + ); +}; export default Flex; diff --git a/src/Flex/FlexWrapper.styles.js b/src/Flex/FlexWrapper.styles.js deleted file mode 100644 index 8e952d1d..00000000 --- a/src/Flex/FlexWrapper.styles.js +++ /dev/null @@ -1,95 +0,0 @@ -import styled, { css } from 'styled-components'; - -export const FlexWrapper = styled.div` - ${({ - container, - flexDirection, - flexWrap, - alignItems, - justifyContent, - height, - maxHeight, - flex, - flexBasis, - flexGrow, - flexShrink, - width, - maxWidth, - justifySelf, - alignSelf, - }) => - - css` - display: ${container ? 'flex' : 'block'}; - - ${flexDirection && - css` - flex-direction: ${flexDirection}; - `} - - ${flexWrap && - css` - flex-wrap: ${flexWrap}; - `} - - ${justifyContent && - css` - justify-content: ${justifyContent}; - `} - - ${alignItems && - css` - align-items: ${alignItems}; - `} - - ${height && - css` - height: ${height}; - `} - - ${maxHeight && - css` - max-height: ${maxHeight}; - `} - - ${width && - css` - width: ${width}; - `} - - ${maxWidth && - css` - max-width: ${maxWidth}; - `} - - ${flex && - css` - flex: ${flex}; - `} - - ${flexGrow && - css` - flex-grow: ${flexGrow}; - `} - - ${flexShrink && - css` - flex-shrink: ${flexShrink}; - `} - - ${flexBasis && - css` - flex-basis: ${flexBasis}; - `} - - ${alignSelf && - css` - align-self: ${alignSelf}; - `} - - ${justifySelf && - css` - justify-self: ${justifySelf}; - `} - `} -`; diff --git a/src/Popover/PopoverCard.jsx b/src/Popover/PopoverCard.jsx deleted file mode 100644 index 9294d794..00000000 --- a/src/Popover/PopoverCard.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import styled from 'styled-components'; - -import PopoverBody from './PopoverBody'; - -const handleWidth = (cardSize) => { - switch (cardSize) { - case 'sm': - return '32rem'; - case 'md': - return '40rem'; - default: - return '32rem'; - } -}; - -const PopoverCard = styled(PopoverBody)` - padding: 1.5rem; - width: ${({ size }) => handleWidth(size)}; -`; - -export default PopoverCard; diff --git a/src/Popover/PopoverCard.module.scss b/src/Popover/PopoverCard.module.scss new file mode 100644 index 00000000..ee682f5c --- /dev/null +++ b/src/Popover/PopoverCard.module.scss @@ -0,0 +1,13 @@ +@import '../../scss/theme'; + +.popover-card { + padding: $card-spacing; +} + +.popover-card-sm { + width: $card-width-sm; +} + +.popover-card-md { + width: $card-width-md; +} diff --git a/src/Popover/PopoverCard.tsx b/src/Popover/PopoverCard.tsx new file mode 100644 index 00000000..21897035 --- /dev/null +++ b/src/Popover/PopoverCard.tsx @@ -0,0 +1,36 @@ +import React, { ReactNode } from 'react'; +import classNames from 'classnames'; +import PopoverBody from './PopoverBody'; + +import styles from './PopoverCard.module.scss'; + +const handleWidth = (cardSize) => { + switch (cardSize) { + case 'md': + return styles['popover-card-md']; + default: + return styles['popover-card-sm']; + } +}; + +interface PopoverCardProps { + className?: string; + children?: ReactNode; + size?: 'sm' | 'md'; +} + +const PopoverCard = ({ + children, + className, + size = 'sm', +}: PopoverCardProps) => { + const widthClass = handleWidth(size); + + return ( + + {children} + + ); +}; + +export default PopoverCard; diff --git a/yarn.lock b/yarn.lock index 823b1c8c..d02745d9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -181,7 +181,7 @@ dependencies: "@babel/types" "^7.22.15" -"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.22.5": +"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.22.5": version "7.22.15" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0" integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w== @@ -1137,7 +1137,7 @@ "@babel/parser" "^7.22.15" "@babel/types" "^7.22.15" -"@babel/traverse@^7.1.6", "@babel/traverse@^7.22.15", "@babel/traverse@^7.22.20", "@babel/traverse@^7.22.8", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2": +"@babel/traverse@^7.1.6", "@babel/traverse@^7.22.15", "@babel/traverse@^7.22.20", "@babel/traverse@^7.22.8", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2": version "7.22.20" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.20.tgz#db572d9cb5c79e02d83e5618b82f6991c07584c9" integrity sha512-eU260mPZbU7mZ0N+X10pxXhQFMGTeLb9eFS0mxehS8HZp9o1uSnFeWQuG1UPrlxgA7QoUzFhOnilHDp0AXCyHw== @@ -1215,13 +1215,6 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43" integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ== -"@emotion/is-prop-valid@^1.1.0": - version "1.2.1" - resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc" - integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw== - dependencies: - "@emotion/memoize" "^0.8.1" - "@emotion/memoize@^0.8.1": version "0.8.1" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17" @@ -1257,16 +1250,6 @@ resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec" integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA== -"@emotion/stylis@^0.8.4": - version "0.8.5" - resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" - integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== - -"@emotion/unitless@^0.7.4": - version "0.7.5" - resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" - integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== - "@emotion/unitless@^0.8.1": version "0.8.1" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3" @@ -4734,17 +4717,6 @@ babel-plugin-react-docgen@^4.2.1: lodash "^4.17.15" react-docgen "^5.0.0" -"babel-plugin-styled-components@>= 1.12.0": - version "2.1.4" - resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz#9a1f37c7f32ef927b4b008b529feb4a2c82b1092" - integrity sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g== - dependencies: - "@babel/helper-annotate-as-pure" "^7.22.5" - "@babel/helper-module-imports" "^7.22.5" - "@babel/plugin-syntax-jsx" "^7.22.5" - lodash "^4.17.21" - picomatch "^2.3.1" - babel-plugin-syntax-flow@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d" @@ -5134,11 +5106,6 @@ camelcase@^5.3.1: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320" integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== -camelize@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3" - integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ== - caniuse-lite@^1.0.30001517: version "1.0.30001535" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001535.tgz#908a5b7ef11172f51f0b88f3d850aef1c6a3cf7b" @@ -5556,11 +5523,6 @@ crypto-random-string@^2.0.0: resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5" integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA== -css-color-keywords@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" - integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg== - css-loader@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-4.3.0.tgz#c888af64b2a5b2e85462c72c0f4a85c7e2e0821e" @@ -5604,15 +5566,6 @@ css-select@^4.1.3: domutils "^2.8.0" nth-check "^2.0.1" -css-to-react-native@^3.0.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32" - integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ== - dependencies: - camelize "^1.0.0" - css-color-keywords "^1.0.0" - postcss-value-parser "^4.0.2" - css-what@^6.0.1: version "6.1.0" resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4" @@ -7389,7 +7342,7 @@ history@^4.9.0: tiny-warning "^1.0.0" value-equal "^1.0.1" -hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1: +hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -10467,7 +10420,7 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector cssesc "^3.0.0" util-deprecate "^1.0.2" -postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: +postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== @@ -11703,11 +11656,6 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" -shallowequal@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" - integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== - shebang-command@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea" @@ -12054,22 +12002,6 @@ style-loader@^3.3.1: resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.3.tgz#bba8daac19930169c0c9c96706749a597ae3acff" integrity sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw== -styled-components@^5, styled-components@^5.3.3: - version "5.3.11" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.11.tgz#9fda7bf1108e39bf3f3e612fcc18170dedcd57a8" - integrity sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw== - dependencies: - "@babel/helper-module-imports" "^7.0.0" - "@babel/traverse" "^7.4.5" - "@emotion/is-prop-valid" "^1.1.0" - "@emotion/stylis" "^0.8.4" - "@emotion/unitless" "^0.7.4" - babel-plugin-styled-components ">= 1.12.0" - css-to-react-native "^3.0.0" - hoist-non-react-statics "^3.0.0" - shallowequal "^1.1.0" - supports-color "^5.5.0" - stylis@4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"