@bitrise/bitkit 10.24.2 → 10.25.0

package/package.json

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

package/src/Components/Text/Text.stories.tsx

@@ -17,5 +17,6 @@ WithProps.args = sortObjectByKey({
   children: 'The quick brown fox jumps over the lazy dog.',
   fontWeight: 'normal',
   letterSpacing: 'normal',
+  size: ['5', '3'],
   textTransform: 'none',
 });

package/src/Foundations/Breakpoints/Breakpoints.ts

@@ -1,13 +1,15 @@
 export const BREAKPOINTS = {
   MOBILE: 'base',
+  TABLET: 'tablet',
   DESKTOP: 'desktop',
-  WIDE: 'wide',
+  WIDEDESKTOP: 'wideDesktop',
 };
 
 const breakpoints = {
   [BREAKPOINTS.MOBILE]: '0rem',
-  [BREAKPOINTS.DESKTOP]: '53rem', // 848px
-  [BREAKPOINTS.WIDE]: '101rem', // 1616px
+  [BREAKPOINTS.TABLET]: '53rem', // 848px
+  [BREAKPOINTS.DESKTOP]: '80rem', // 1280px
+  [BREAKPOINTS.WIDEDESKTOP]: '101rem', // 1616px
 };
 
 export default breakpoints;

package/src/Foundations/Responsive/Responsive.examples.tsx

@@ -0,0 +1,95 @@
+import { Code } from '@chakra-ui/react';
+import Box from '../../Components/Box/Box';
+import Card from '../../Components/Card/Card';
+import CardContent from '../../Components/Card/CardContent';
+import Link from '../../Components/Link/Link';
+import List from '../../Components/List/List';
+import ListItem from '../../Components/List/ListItem';
+import Provider from '../../Components/Provider/Provider';
+import Text from '../../Components/Text/Text';
+
+import useResponsive from '../../hooks/useResponsive';
+
+export const Responsive = () => {
+  const { isMobile, isTablet, isDesktop, isWideDesktop } = useResponsive();
+  return (
+    <Provider>
+      <Text as="h2" size="8" marginBottom="24">
+        Responsive solutions
+      </Text>
+
+      <Card boxShadow="medium" marginBottom="48" padding="24">
+        <CardContent>
+          <Text as="h3" size="6" marginBottom="12">
+            With responsive style props
+          </Text>
+          <Text marginBottom="32">
+            Use the array syntax on style props, when the element should be always visible, but you want to change
+            margin, padding, etc on it.
+            <br />
+            <Link
+              colorScheme="purple"
+              href="https://chakra-ui.com/docs/styled-system/responsive-styles#the-array-syntax"
+              isExternal
+              isUnderlined
+            >
+              https://chakra-ui.com/docs/styled-system/responsive-styles#the-array-syntax
+            </Link>
+          </Text>
+          <Text marginBottom="8">We have 4 breakpoints:</Text>
+          <Box
+            backgroundColor={['green.40', 'purple.30', 'red.40', 'neutral.40']}
+            color="neutral.93"
+            paddingX="24"
+            paddingY="16"
+            transition="200ms"
+          >
+            This Box is
+            <List>
+              <ListItem>green below 848px (53rem)</ListItem>
+              <ListItem>purple from 848px (53rem) but below 1280px (80rem)</ListItem>
+              <ListItem>red from 1280px (80rem) but below 1616px (101rem)</ListItem>
+              <ListItem>gray from 1616px (101rem)</ListItem>
+            </List>
+          </Box>
+        </CardContent>
+      </Card>
+
+      <Card boxShadow="medium" marginBottom="24" padding="24">
+        <CardContent>
+          <Text as="h3" size="6" marginBottom="12">
+            With useResponsiveHook
+          </Text>
+          <Text marginBottom="24">
+            Use this hook when you want to render something conditionally. It will return an array with 1-4 booleans,
+            like:
+            <br />
+            <Code backgroundColor="neutral.20" color="neutral.93" paddingY="4" paddingX="8">
+              const &#123; isMobile, isTablet, isDesktop, isWideDesktop &#125; = useResponsive();
+            </Code>
+          </Text>
+          {isMobile && (
+            <Box backgroundColor="green.40" color="neutral.93" paddingX="24" paddingY="16">
+              This Box is rendered below 848px (53rem), because isMobile is true.
+            </Box>
+          )}
+          {isTablet && (
+            <Box backgroundColor="purple.30" color="neutral.93" paddingX="24" paddingY="16">
+              This Box is rendered from 848px (53rem) but below 1280px (80rem), because isTablet is true.
+            </Box>
+          )}
+          {isDesktop && (
+            <Box backgroundColor="red.40" color="neutral.93" paddingX="24" paddingY="16">
+              This Box is rendered from 1280px (80rem) but below 1616px, because isDesktop is true.
+            </Box>
+          )}
+          {isWideDesktop && (
+            <Box backgroundColor="neutral.40" color="neutral.93" paddingX="24" paddingY="16">
+              This Box is rendered from 1616px (101rem), because isWideDesktop is true.
+            </Box>
+          )}
+        </CardContent>
+      </Card>
+    </Provider>
+  );
+};

package/src/Foundations/Responsive/Responsive.stories.mdx

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/addon-docs';
+import { Responsive } from './Responsive.examples';
+
+<Meta title="Foundations/Responsive" />
+
+<Responsive />

package/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export { default as useHistory } from './useHistory';
+export { default as useResponsive } from './useResponsive';
 export { useDisclosure } from '@chakra-ui/react';

package/src/hooks/useResponsive.ts

@@ -0,0 +1,23 @@
+import { useMediaQuery } from '@chakra-ui/react';
+import breakpoints, { BREAKPOINTS } from '../Foundations/Breakpoints/Breakpoints';
+
+const minusOnePixel = (value: string) => {
+  const valueInPixels = parseInt(value, 10) * 16;
+  return `${valueInPixels - 1}px`;
+};
+
+const mediaQueries = [
+  `(min-width: ${breakpoints[BREAKPOINTS.MOBILE]}) and (max-width: ${minusOnePixel(breakpoints[BREAKPOINTS.TABLET])})`,
+  `(min-width: ${breakpoints[BREAKPOINTS.TABLET]}) and (max-width: ${minusOnePixel(breakpoints[BREAKPOINTS.DESKTOP])})`,
+  `(min-width: ${breakpoints[BREAKPOINTS.DESKTOP]}) and (max-width: ${minusOnePixel(
+    breakpoints[BREAKPOINTS.WIDEDESKTOP],
+  )})`,
+  `(min-width: ${breakpoints[BREAKPOINTS.WIDEDESKTOP]})`,
+];
+
+const useResponsive = () => {
+  const [isMobile, isTablet, isDesktop, isWideDesktop] = useMediaQuery(mediaQueries);
+  return { isMobile, isTablet, isDesktop, isWideDesktop };
+};
+
+export default useResponsive;