@bitrise/bitkit 10.15.0-alpha-table-new.1 → 10.16.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.15.0-alpha-table-new.1",
+  "version": "10.16.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/AspectRatio/AspectRatio.stories.tsx

@@ -0,0 +1,24 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Image from '../Image/Image';
+import AspectRatio from './AspectRatio';
+
+export default {
+  title: 'Components/AspectRatio',
+  component: AspectRatio,
+} as ComponentMeta<typeof AspectRatio>;
+
+const Template: ComponentStory<typeof AspectRatio> = (props) => <AspectRatio {...props} />;
+
+export const WithImage = Template.bind({});
+WithImage.args = {
+  children: <Image alt="Bitrise office" src="bitrise_office.jpg" />,
+  maxWidth: 800,
+  ratio: 1920 / 1280,
+};
+
+export const WithVideo = Template.bind({});
+WithVideo.args = {
+  children: <iframe title="Intro to Bitrise" src="https://www.youtube.com/embed/JrCn9xWQ7IM" allowFullScreen />,
+  maxWidth: 800,
+  ratio: 16 / 9,
+};

package/src/Components/AspectRatio/AspectRatio.tsx

@@ -0,0 +1,14 @@
+import { AspectRatio as ChakraAspectRatio, AspectRatioProps, forwardRef } from '@chakra-ui/react';
+
+/**
+ * AspectRatio component is used to embed responsive videos and maps, etc.
+ *
+ * https://chakra-ui.com/docs/components/aspect-ratio/usage
+ */
+const AspectRatio = forwardRef<AspectRatioProps, 'div'>((props, ref) => {
+  return <ChakraAspectRatio {...props} ref={ref} />;
+});
+
+export type { AspectRatioProps };
+
+export default AspectRatio;

package/src/Components/Table/Table.theme.ts

@@ -51,6 +51,7 @@ const Tabletheme: SystemStyleObject = {
       paddingY: '12',
       fontWeight: 'bold',
       textAlign: 'left',
+      whiteSpace: 'nowrap',
     },
     sortButton: {
       display: 'flex',

package/src/Components/Table/Tr.tsx

@@ -29,7 +29,6 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
   };
 
   if (onClick) {
-    console.log(css);
     properties.sx = css.clickableTr;
   }
 

package/src/Old/Input/InputLabel.tsx

@@ -10,7 +10,7 @@ export type Props = {
  * input.
  */
 const InputLabel: React.FunctionComponent<Props> = (props: Props) => {
-  return <Text {...props} as="label" marginY="4" size="3" color="purple.10" fontWeight="bold" />;
+  return <Text as="label" marginY="4" size="3" color="purple.10" fontWeight="bold" {...props} />;
 };
 
 export default InputLabel;

package/src/index.ts

@@ -163,6 +163,9 @@ export { default as AccordionItem } from './Components/Accordion/AccordionItem';
 export type { LightBoxProps } from './Components/LightBox/LightBox';
 export { default as LightBox } from './Components/LightBox/LightBox';
 
+export type { AspectRatioProps } from './Components/AspectRatio/AspectRatio';
+export { default as AspectRatio } from './Components/AspectRatio/AspectRatio';
+
 export type { TableProps } from './Components/Table/Table';
 export { default as Table } from './Components/Table/Table';