@spothero/ui 14.3.4-beta.0 → 14.3.4-beta.1

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# 14.3.4-beta.1 - 04/11/2022
+
+## Miscellaneous Updates
+* [[629fd70](https://github.com/spothero/fe-ui/commit/629fd70)] - `fix:` Try passing Button as prop (Gru Singh)
+* [[18ee171](https://github.com/spothero/fe-ui/commit/18ee171)] - `refactor:` Add controls to container stories ([#280](https://github.com/spothero/fe-ui/pull/280)) (annaliarosed)
+	* `refactor:` Add controls to Container stories
+	* `refactor:` Extract all colors to utils
+	* `refactor:` Extract get all sizes to utils and use it in container stories
+	* `fix:` Remove unused importsCo-authored-by: Annalia Destefano <annalia.destefano@spothero.com>
+
 # 14.3.4-beta.0 - 04/11/2022
 
 ## Miscellaneous Updates

package/CHANGELOG.tmp

@@ -1,5 +1,10 @@
-# 14.3.4-beta.0 - 04/11/2022
+# 14.3.4-beta.1 - 04/11/2022
 
 ## Miscellaneous Updates
-* [[016347f](https://github.com/spothero/fe-ui/commit/016347f)] - `fix:` Use relative path for Button inorder to fix build issue in consumer (Gru Singh)
+* [[629fd70](https://github.com/spothero/fe-ui/commit/629fd70)] - `fix:` Try passing Button as prop (Gru Singh)
+* [[18ee171](https://github.com/spothero/fe-ui/commit/18ee171)] - `refactor:` Add controls to container stories ([#280](https://github.com/spothero/fe-ui/pull/280)) (annaliarosed)
+	* `refactor:` Add controls to Container stories
+	* `refactor:` Extract all colors to utils
+	* `refactor:` Extract get all sizes to utils and use it in container stories
+	* `fix:` Remove unused importsCo-authored-by: Annalia Destefano <annalia.destefano@spothero.com>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "14.3.4-beta.0",
+  "version": "14.3.4-beta.1",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index-bundled.cjs.js",
   "module": "v2/index.js",

package/styles/v2/components/Checkbox/Checkbox.stories.js

@@ -11,16 +11,14 @@ export default {
     },
 };
 
-const CheckboxTemplate = props => {
-    return <Component {...props} />;
-};
+const CheckboxTemplate = props => <Component {...props} />;
 
 CheckboxTemplate.propTypes = {
     isChecked: PropTypes.bool,
     isDisabled: PropTypes.bool,
     isIndeterminate: PropTypes.bool,
     defaultIsChecked: PropTypes.bool,
-    size: PropTypes.string,
+    size: PropTypes.oneOf(['sm', 'md', 'lg']),
     children: PropTypes.node,
 };
 

package/styles/v2/components/Container/Container.stories.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import Component from './Container';
 import {useTheme, useToken, useBreakpointValue} from '@chakra-ui/react';
+import {createSelectControl} from 'storybook/utils/create-control';
+import {getAllColors} from 'storybook/utils/get-all-colors';
+import {getAllSizes} from 'storybook/utils/get-all-sizes';
+import PropTypes from 'prop-types';
 
 import styleProps from './Container.styles';
 
-import Heading from 'v2/components/Heading/Heading';
-
 export default {
     title: 'v2/Container',
     component: Component,
@@ -14,20 +16,37 @@ export default {
     },
 };
 
-const Template = args => {
+const ContainerTemplate = props => {
     const {remToPixels} = useTheme();
     const breakpoint = useBreakpointValue(styleProps.maxW);
     const size = useToken('sizes', breakpoint);
-    const isMobile = (breakpoint || '').includes('mobile');
+    const isMobile = breakpoint?.includes('base');
     const headingText = size
         ? `Container: ${size}${isMobile ? '' : ` - ${remToPixels(size)}px`}`
         : '';
 
-    return (
-        <Component h="20" color="white" bg="secondary.default">
-            {headingText && <Heading as="h1">{headingText}</Heading>}
-        </Component>
-    );
+    return <Component {...props}>{headingText}</Component>;
+};
+
+ContainerTemplate.propTypes = {
+    color: PropTypes.oneOf(getAllColors),
+    bg: PropTypes.oneOf(getAllColors),
+    h: PropTypes.oneOf(getAllSizes),
+    centerContent: PropTypes.bool,
+    children: PropTypes.node,
 };
 
-export const Container = Template.bind({});
+export const Container = ContainerTemplate.bind({});
+
+Container.argTypes = {
+    ...createSelectControl('color', getAllColors),
+    ...createSelectControl('bg', getAllColors),
+    ...createSelectControl('h', getAllSizes),
+};
+
+Container.args = {
+    color: 'white',
+    bg: 'secondary.default',
+    h: '20',
+    centerContent: true,
+};

package/styles/v2/components/ImageCarousel/ImageCarousel.jsx

@@ -4,11 +4,12 @@ import {Box} from '@chakra-ui/react';
 import useEmblaCarousel from 'embla-carousel-react';
 import IconChevronLeft from '@spothero/icons/chevron-left';
 import IconChevronRight from '@spothero/icons/chevron-right';
-import {Button} from '../Button';
+import V2Button from 'v2/components/Button/Button';
 
 const ImageCarousel = ({images, width, height, ...props}) => {
     const imgWidth = width ? `${width}rem` : '100%';
     const imgHeight = `${height}rem`;
+    const Button = props.Button || V2Button;
 
     const [viewportRef, embla] = useEmblaCarousel({
         skipSnaps: false,