@codecademy/styleguide 78.5.6-alpha.a75de2.0 → 78.5.6-alpha.afe04a.0

package/src/lib/Organisms/ConnectedForm/ConnectedFormGroup/ConnectedFormGroup.stories.tsx

@@ -2,9 +2,7 @@ import {
   ConnectedForm,
   ConnectedFormGroup,
   ConnectedFormGroupProps,
-  ConnectedInput,
   ConnectedRadioGroupInput,
-  Text,
   useConnectedForm,
 } from '@codecademy/gamut';
 import { action } from '@storybook/addon-actions';
@@ -121,85 +119,3 @@ export const States = () => {
     </ConnectedForm>
   );
 };
-
-/**
- * InfoTip buttons are automatically labelled by string field labels for accessibility.
- * Screen readers will announce "Field Label, button" when focusing the InfoTip.
- */
-export const InfoTipAutoLabelling: Story = {
-  render: () => (
-    <ConnectedForm
-      defaultValues={{ email: '' }}
-      onSubmit={(values) => action('Form Submitted')(values)}
-    >
-      <ConnectedFormGroup
-        field={{ component: ConnectedInput, type: 'email' }}
-        infotip={{
-          info: 'We will never share your email with third parties.',
-          placement: 'floating',
-        }}
-        label="Email address"
-        name="email"
-      />
-    </ConnectedForm>
-  ),
-};
-
-/**
- * For ReactNode labels, you have three options for accessible InfoTip labelling:
- * - `labelledByFieldLabel: true` - uses the field label
- * - `ariaLabel` - provides a custom accessible name
- * - `ariaLabelledby` - references another element on the page
- */
-export const InfoTipWithReactNodeLabel: Story = {
-  render: () => (
-    <ConnectedForm
-      defaultValues={{ username: '', password: '', apiKey: '' }}
-      onSubmit={(values) => action('Form Submitted')(values)}
-    >
-      <Text as="h3" id="api-section-heading" mb={8}>
-        API Configuration
-      </Text>
-      <ConnectedFormGroup
-        field={{ component: ConnectedInput }}
-        infotip={{
-          alignment: 'bottom-left',
-          info: 'Choose a unique username between 3-20 characters.',
-          labelledByFieldLabel: true,
-        }}
-        label={
-          <Text as="span" fontWeight="bold">
-            Username (labelledByFieldLabel)
-          </Text>
-        }
-        name="username"
-      />
-      <ConnectedFormGroup
-        field={{ component: ConnectedInput, type: 'password' }}
-        infotip={{
-          info: 'Password must be at least 8 characters with one uppercase letter and one number.',
-          ariaLabel: 'Password requirements',
-        }}
-        label={
-          <Text as="span" fontWeight="bold">
-            Password (ariaLabel)
-          </Text>
-        }
-        name="password"
-      />
-      <ConnectedFormGroup
-        field={{ component: ConnectedInput }}
-        infotip={{
-          info: 'You can find your API key in the developer settings dashboard.',
-          ariaLabelledby: 'api-section-heading',
-        }}
-        label={
-          <Text as="span" fontWeight="bold">
-            API Key (ariaLabelledby)
-          </Text>
-        }
-        name="apiKey"
-      />
-    </ConnectedForm>
-  ),
-};

package/src/lib/Organisms/GridForm/Fields.mdx

@@ -95,23 +95,3 @@ Hidden inputs can be used to include data that users can't see or modify with th
 We call it a "sweet container" so that bots do not immediately detect it as a honeypot input.
 
 <Canvas of={FieldsStories.SweetContainer} />
-
-## InfoTip
-
-Any field can include an `infotip` prop to provide additional context to users.
-
-### Automatic labelling
-
-InfoTip buttons are automatically labelled by string field labels for accessibility.
-
-<Canvas of={FieldsStories.InfoTipAutoLabelling} />
-
-### ReactNode labels
-
-For ReactNode labels, you have three options:
-
-- `labelledByFieldLabel: true` - opt into automatic labelling by the field label
-- `ariaLabel` - provide a custom accessible name
-- `ariaLabelledby` - reference another element on the page, such as a section heading
-
-<Canvas of={FieldsStories.InfoTipWithReactNodeLabel} />

package/src/lib/Organisms/GridForm/Fields.stories.tsx

@@ -1,4 +1,4 @@
-import { FormGroup, GridForm, Input, Text } from '@codecademy/gamut';
+import { FormGroup, GridForm, Input } from '@codecademy/gamut';
 import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -328,75 +328,3 @@ export const SweetContainer: Story = {
     ],
   },
 };
-
-/**
- * InfoTip buttons are automatically labelled by string field labels for accessibility.
- * Screen readers will announce "Field Label, button" when focusing the InfoTip.
- */
-export const InfoTipAutoLabelling: Story = {
-  args: {
-    fields: [
-      {
-        label: 'Email address',
-        name: 'email',
-        size: 9,
-        type: 'email',
-        infotip: {
-          info: 'We will never share your email with third parties.',
-          placement: 'floating',
-        },
-      },
-    ],
-  },
-};
-
-/**
- * For ReactNode labels, you have three options for accessible InfoTip labelling:
- * - `labelledByFieldLabel: true` - uses the field label
- * - `ariaLabel` - provides a custom accessible name
- * - `ariaLabelledby` - references another element on the page
- */
-export const InfoTipWithReactNodeLabel: Story = {
-  render: (args) => (
-    <>
-      <Text as="h3" id="api-section-heading" mb={8}>
-        API Configuration
-      </Text>
-      <GridForm {...args} />
-    </>
-  ),
-  args: {
-    fields: [
-      {
-        label: <strong>Username (labelledByFieldLabel)</strong>,
-        name: 'username',
-        size: 9,
-        type: 'text',
-        infotip: {
-          info: 'Choose a unique username between 3-20 characters.',
-          labelledByFieldLabel: true,
-        },
-      },
-      {
-        label: <strong>Password (ariaLabel)</strong>,
-        name: 'password',
-        size: 9,
-        type: 'password',
-        infotip: {
-          info: 'Password must be at least 8 characters with one uppercase letter and one number.',
-          ariaLabel: 'Password requirements',
-        },
-      },
-      {
-        label: <strong>API Key (ariaLabelledby)</strong>,
-        name: 'apiKey',
-        size: 9,
-        type: 'text',
-        infotip: {
-          info: 'You can find your API key in the developer settings dashboard.',
-          ariaLabelledby: 'api-section-heading',
-        },
-      },
-    ],
-  },
-};

package/src/lib/Organisms/GridForm/Layout.mdx

@@ -34,7 +34,7 @@ Solo field form should always have their solo input be required. They should aut
 
 ## InfoTips
 
-A field can include our existing `InfoTip`. See the <LinkTo id="Molecules/Tips/InfoTip">Fields</LinkTo> story for specific accessibility tooling and <LinkTo id="Molecules/Tips/InfoTip">InfoTip</LinkTo> story for more information on what props are available.
+A field can include our existing `InfoTip`. See the <LinkTo id="Molecules/Tips/InfoTip">InfoTip</LinkTo> story for more information on what props are available.
 
 See the <LinkTo id="Atoms/FormInputs/Radio">Radio</LinkTo> story for an example of how to add a infotip to a radio option.
 

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} />