@workday/canvas-kit-docs 15.0.0-alpha.0010-next.0 → 15.0.0-alpha.0023-next.0

package/dist/mdx/preview-react/segmented-control/SegmentedControl.mdx

@@ -1,139 +0,0 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-import Basic from './examples/Basic';
-import Disabled from './examples/Disabled';
-import TextAndIcon from './examples/TextAndIcon';
-import TextOnly from './examples/TextOnly';
-import Sizes from './examples/Sizes';
-import Vertical from './examples/Vertical';
-import RTL from './examples/RTL';
-import Dynamic from './examples/Dynamic';
-
-
-# Canvas Kit Segmented Control
-
-Segmented Control is a
-[compound component](/getting-started/for-developers/resources/compound-components/) that represents
-a linear group of multiple buttons allowing the selection of a specific value.
-
-[> Workday Design Reference](https://design.workday.com/components/buttons/segmented-control)
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-preview-react
-```
-
-## Usage
-
-### Basic Example
-
-`SegmentedControl` includes a container `SegmentedControl` component and the following
-subcomponents: `SegmentedControl.List` and `SegmentedControl.Item`.
-
-The example below contains a `SegmentedControl` with four icon-only buttons. Each button is rendered
-using a `SegmentedControl.Item` and is paired with a tooltip describing the button's function. Only
-one button can be active at a time.
-
-<ExampleCodeBlock code={Basic} />
-
-We **strongly** discourage including more than four buttons in a single `SegmentedControl`.
-
-### Accessibility
-
-Our `SegmentedControl` component renders semantic HTML `<button>` elements to the browser DOM,
-wrapped inside of a `<div>` with an explicit ARIA `role="group"`. This is equivalent to an HTML
-`<fieldset>` element, and useful for screen readers to describe the relationship between the
-buttons.
-
-- Each button is a 2-state toggle button with `aria-pressed={true | false}` to indicate the current
-  state to screen readers.
-- Providing your own `aria-label`string to `SegmentedControl.List` is recommended for describing the
-  purpose of the component.
-
-#### Screen Reader Experience
-
-When users interact with a `SegmentedControl` using screen readers:
-
-- The group context is announced (e.g., "View options, group" when using
-  `aria-label="View options"`)
-- Each button announces its text/label, "toggle button" role, and pressed/unpressed state (e.g.,
-  "List view, toggle button, pressed" or "Grid view, toggle button, not pressed")
-- For icon-only buttons with tooltips, the tooltip text is announced along with the button role and
-  state
-- When a button is activated, screen readers should announce the new state
-
-Refer to [Button](?path=/docs/components-buttons--docs#accessibility) for more information about
-accessibility of these components.
-
-### Variations
-
-`SegmentedControl` supports three variations based on whether or not its `SegmentedControl.Item`
-components have an `icon` prop and/or text content: icon-only, text-only, and text-and-icon.
-
-All `SegmentedControl.Item` components within a given `SegmentedControl` must be of the same
-variation.
-
-#### Icon-Only
-
-To render an icon-only `SegmentedControl`, apply the `icon` prop to `SegmentedControl.Item` and do
-not provide it with text content. Refer to the [basic example](#basic-example) above for an instance
-of an icon-only `SegmentedControl`.
-
-The icon-only variation is the only variation which supports a vertical orientation in addition to
-the default horizontal orientation. Set the `orientation` prop of `SegmentedControl` to `vertical`
-to configure the component to render vertically.
-
-<ExampleCodeBlock code={Vertical} />
-
-#### Text-Only
-
-To render a text-only `SegmentedControl`, omit the `icon` prop from `SegmentedControl.Item` and
-provide it with text content.
-
-<ExampleCodeBlock code={TextOnly} />
-
-#### Text-and-Icon
-
-To render a text-and-icon `SegmentedControl`, apply the `icon` prop to `SegmentedControl.Item` and
-provide it with text content.
-
-<ExampleCodeBlock code={TextAndIcon} />
-
-### Sizes
-
-`SegmentedControl` accepts a `size` prop which supports the following values:
-
-- `small`
-- `medium` (Default)
-- `large`
-
-<ExampleCodeBlock code={Sizes} />
-
-### Disabled
-
-Set the `disabled` prop of `SegmentedControl` to disable the entire component including its buttons.
-
-<ExampleCodeBlock code={Disabled} />
-
-### Right-to-Left (RTL)
-
-`SegmentedControl` supports right-to-left languages when specified in the `CanvasProvider` `theme`.
-
-<ExampleCodeBlock code={RTL} />
-
-### Dynamic Items
-
-`SegmentedControl` supports a
-[dynamic API](/getting-started/for-developers/resources/collection-api/#dynamic-items) where instead
-of statically providing the JSX for each `SegmentedControl.Item`, you pass an array of `items` in
-the `model` state and provide a render function to display the items.
-
-<ExampleCodeBlock code={Dynamic} />
-
-## Component API
-
-<SymbolDoc name="SegmentedControl" fileName="/preview-react/" />
-
-## Specifications
-
-<Specifications file="SegmentedControl.spec.ts" name="SegmentedControl" />

package/dist/mdx/preview-react/segmented-control/examples/Basic.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
-import {BodyText} from '@workday/canvas-kit-react/text';
-import {
-  gridIcon,
-  listViewIcon,
-  listDetailIcon,
-  pieChartIcon,
-} from '@workday/canvas-system-icons-web';
-
-export default () => {
-  const [viewType, setViewType] = React.useState('table');
-
-  return (
-    <>
-      <SegmentedControl initialValue={viewType} onSelect={data => setViewType(data.id)}>
-        <SegmentedControl.List aria-label="View type">
-          <SegmentedControl.Item data-id="table" icon={gridIcon} tooltipProps={{title: 'Table'}} />
-          <SegmentedControl.Item
-            data-id="list-view"
-            icon={listViewIcon}
-            tooltipProps={{title: 'List'}}
-          />
-          <SegmentedControl.Item
-            data-id="list-detail"
-            icon={listDetailIcon}
-            tooltipProps={{title: 'Detail'}}
-          />
-          <SegmentedControl.Item
-            data-id="diagrams"
-            icon={pieChartIcon}
-            tooltipProps={{title: 'Diagram'}}
-          />
-        </SegmentedControl.List>
-      </SegmentedControl>
-      <BodyText size="small" marginTop="s">
-        Selected: {viewType}
-      </BodyText>
-    </>
-  );
-};

package/dist/mdx/react/_examples/mdx/examples/SegmentControlWithText.tsx

@@ -1,119 +0,0 @@
-import * as React from 'react';
-
-import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
-import {
-  styled,
-  StyledType,
-  ExtractProps,
-  mouseFocusBehavior,
-} from '@workday/canvas-kit-react/common';
-import {colors, borderRadius, space} from '@workday/canvas-kit-react/tokens';
-import {BaseButton, ButtonColors} from '@workday/canvas-kit-react/button';
-import {CanvasIconTypes, CanvasSystemIcon} from '@workday/design-assets-types';
-const placeholderIcon: CanvasSystemIcon = {
-  name: '',
-  svg: '',
-  filename: '',
-  type: CanvasIconTypes.System,
-};
-
-const getIconButtonColors = (toggled?: boolean): ButtonColors => {
-  return {
-    default: {
-      background: toggled ? colors.blueberry400 : colors.soap200,
-      icon: toggled ? colors.frenchVanilla100 : colors.licorice200,
-      label: toggled ? colors.frenchVanilla100 : colors.licorice200,
-    },
-    hover: {
-      background: toggled ? colors.blueberry400 : colors.soap300,
-      icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
-      label: toggled ? colors.frenchVanilla100 : colors.licorice500,
-    },
-    active: {
-      background: toggled ? colors.blueberry400 : colors.soap500,
-      icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
-      label: toggled ? colors.frenchVanilla100 : colors.licorice500,
-    },
-    focus: {
-      background: toggled ? colors.blueberry400 : undefined,
-      icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
-      label: toggled ? colors.frenchVanilla100 : colors.licorice500,
-    },
-    disabled: {
-      background: toggled ? colors.soap100 : colors.soap100,
-      icon: colors.soap600,
-      label: colors.soap600,
-      opacity: '1',
-    },
-  };
-};
-
-const StyledBaseButton = styled(BaseButton)<
-  ExtractProps<typeof SegmentedControl.Button> & StyledType
->({
-  borderRadius: borderRadius.zero,
-  border: `1px solid ${colors.soap500}`,
-  borderLeft: 'none',
-  minWidth: space.xxxl,
-  '&:first-of-type': {
-    borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
-    borderLeft: `1px solid ${colors.soap500}`,
-  },
-  '&:last-of-type': {
-    borderRadius: `0 ${borderRadius.m} ${borderRadius.m} 0`,
-  },
-  '&[aria-pressed="true"]': {
-    borderColor: `${colors.blueberry400} !important`,
-    '&:hover, &:focus:hover': {
-      background: colors.blueberry400,
-    },
-  },
-  '&:focus': {
-    borderRadius: borderRadius.m,
-    zIndex: 1,
-    animation: 'none', // reset focusRing animation
-    transition: 'all 120ms, border-radius 1ms',
-    ...mouseFocusBehavior({
-      '&': {
-        borderRadius: borderRadius.zero,
-        '&:first-of-type': {
-          borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
-        },
-        '&:last-of-type': {
-          borderRadius: `0 ${borderRadius.m} ${borderRadius.m} 0`,
-        },
-      },
-    }),
-  },
-});
-
-export default () => {
-  const [value, setValue] = React.useState<string | number>('day');
-  const handleToggle = (selectedValue: string | number) => {
-    setValue(selectedValue);
-  };
-
-  const isDayToggled = value === 'day';
-  const isWeekToggled = value === 'week';
-
-  return (
-    <SegmentedControl value={value} onChange={handleToggle}>
-      <StyledBaseButton
-        icon={{...placeholderIcon}}
-        colors={getIconButtonColors(isDayToggled)}
-        value="day"
-        onClick={() => setValue('day')}
-      >
-        Day
-      </StyledBaseButton>
-      <StyledBaseButton
-        icon={placeholderIcon}
-        colors={getIconButtonColors(isWeekToggled)}
-        value="week"
-        onClick={() => setValue('week')}
-      >
-        Week
-      </StyledBaseButton>
-    </SegmentedControl>
-  );
-};