@codecademy/styleguide 79.1.0 → 79.2.0-alpha.2d3aae.0

package/src/lib/Foundations/System/Props.mdx

@@ -1,230 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../shared/elements';
-
-export const parameters = {
-  title: 'Props',
-  subtitle:
-    'Reusable CSS-in-JS props with predictable behaviors and a consistent API for responsive CSS.',
-  source: {
-    repo: 'gamut-styles',
-    githubLink:
-      'https://github.com/Codecademy/gamut/blob/af5be6e39cccca5d5d8a1f811c77a7a0b618c914/packages/gamut-styles/src/variance/config.ts#L11',
-  },
-};
-
-<Meta title="Foundations/System/Props" />
-
-<AboutHeader {...parameters} />
-
-We provide a set of out of style functions out of the box through `@codecademy/gamut-styles` that are standardized throughout all of our components. These props are strongly typed and can be included as necessary on any styled component.
-
-System props have a few facets that are important to note:
-
-- They can some times represent multiple properties.
-- They may be restricted to specific token scales but will always have access to global css values like `initial` and `none`.
-- They may have a function that transforms the given value into a standardized value (e.g. `width={.5}` => `width: 50%`)
-
-We've grouped these into a few main groups that affect simliar behaviors: `layout`, `space`, `color`, `border`, `background`, `typography`, `positioning`, `grid`, `flex`, `shadow`.
-
-You may import these groups directly from `gamut-styles`.
-
-```tsx
-import { variance } from '@codecademy/variance';
-import { system } from '@codecademy/gamut-styles';
-
-const Box = styled.div(variance.compose(system.layout, system.positioning));
-
-<Box position="absolute" width="50px" height="50px" />;
-```
-
-Each system prop has 3 important features:
-
-- `properties`: Any number of CSS Properties this prop is responsible for.
-- `scale`: A set of values that determines valid inputs for each prop (e.g. a scale of `colors` will restrict to only theme colors). These are generally aliases for more verbose or opaque css properties allowing you to specify a human readable name in your props. If a prop doesn't have a scale that means it accepts all valid CSSType values as props, however if it does have a scale it will only accept global values and keys of the provided scale.
-- `transform`: A function that changes the prop / scale value prior to adding it to the stylehseet. This allows us to add / change units for properties like `width` and `height`. Or ensure extra defaults or fallbacks are added dynamically.
-
-<br />
-
-## Layout
-
-Props for handling dimensions and other layout specific properties.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const Box = styled.div(system.layout);
-
-<Box display="flex" width="50%" height="300px" verticalAlign="middle" />;
-```
-
-<TokenTable rows={getPropRows('layout')} columns={defaultColumns} />
-
-## Space
-
-Props for maintaining specific vertical and horizontal rhythms
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const Spacer = styled.div(system.space);
-
-<Spacer p={8} my={[16, 24, 32]} />;
-```
-
-<TokenTable rows={getPropRows('space')} columns={defaultColumns} />
-
-## Typography
-
-Props for text manipulation
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const Text = styled.p(system.typography);
-
-<Text fontSize={16} fontFamily="accent" textTransform="uppercase" />;
-```
-
-<TokenTable rows={getPropRows('typography')} columns={defaultColumns} />
-
-## Color
-
-Specific color properties
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const Background = styled.div(system.color);
-
-<Background bg="navy" textColor="gray-100" borderColor="blue" />;
-```
-
-<TokenTable rows={getPropRows('color')} columns={defaultColumns} />
-
-## Border
-
-Border styles
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const Box = styled.div(system.border);
-
-<Box
-  border={1}
-  borderLeft="none"
-  borderRightStyle="dotted"
-  borderRadius="md"
-/>;
-```
-
-<TokenTable rows={getPropRows('border')} columns={defaultColumns} />
-
-## Flex
-
-Flex specific properties
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const FlexBox = styled.div(system.flex);
-
-<FlexBox flex={1} justifyContent="center" alignItems="flex-start" />;
-```
-
-<TokenTable rows={getPropRows('flex')} columns={defaultColumns} />
-
-## Grid
-
-Grid specific properties
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const GridBox = styled.div(system.grid);
-
-<GridBox gridTemplateColumns="max-content 1fr max-content" columnGap={32} />;
-```
-
-<TokenTable rows={getPropRows('grid')} columns={defaultColumns} />
-
-## Background
-
-Props for background manipulation (sizing / repitition / images), for background color see `colors`.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-import myBg from './myBg.png';
-
-const Box = styled.div(system.background);
-
-<Box background={`url(${myBg}`} backgroundSize="cover" />;
-```
-
-<TokenTable rows={getPropRows('background')} columns={defaultColumns} />
-
-## Positioning
-
-Props that affect stacking and position contexts. Like `top`, `position` and `opacity`.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const Box = styled.div(system.positioning);
-
-<Box position="absolute" zIndex={2} top="0" left="0" />;
-```
-
-<TokenTable rows={getPropRows('positioning')} columns={defaultColumns} />
-
-## Shadow
-
-Props for box and text shadows.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const Box = styled.div(system.shadow);
-
-<Box
-  boxShadow="0 0 4px rgba(0, 0, 0, .15)"
-  textShadow="0 0 4px rgba(0, 0, 0, .15)"
-/>;
-```
-
-<TokenTable rows={getPropRows('shadows')} columns={defaultColumns} />
-
-## List
-
-Props for adjusting list styles when rendering a component as a `ul` or `ol`
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const Box = styled.div(system.list);
-
-<Box
-  as="ul"
-  listStyleType="square"
-  listStylePosition="inside"
-  listStyleImage="none"
->
-  <Box as="li">a list item</Box>
-</Box>;
-```
-
-<TokenTable rows={getPropRows('list')} columns={defaultColumns} />