@telus-uds/components-base 1.1.0 → 1.3.1

package/lib-module/Checkbox/CheckboxInput.native.js

@@ -0,0 +1,6 @@
+/**
+ * There's no checkbox input on native platforms, so this is a noop.
+ */
+const CheckboxInput = () => null;
+
+export default CheckboxInput;

package/lib-module/Checkbox/index.js

@@ -0,0 +1,3 @@
+import Checkbox from './Checkbox';
+export default Checkbox;
+export { default as CheckboxGroup } from './CheckboxGroup';

package/lib-module/Divider/Divider.js

@@ -0,0 +1,123 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import { useThemeTokens } from '../ThemeProvider';
+import Spacer from '../Spacer';
+import { a11yProps, getTokensPropType, selectSystemProps, spacingProps, variantProp, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+/**
+ * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
+ * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
+ */
+
+/**
+ * A basic divider component, horizontal by default. Color and thickness can be controlled by theme.
+ * Divider is based on the flexbox model and uses `alignSelf: flex` to span its flex parent.
+ *
+ * ## Vertical
+ *
+ * Vertical dividers can be created by passing a `vertical` boolean prop.
+ * Note that for a vertical divider the parent flex element **must** have flex direction set to row.
+ * This is the default for web but not for React Native.
+ *
+ * In a flexbox row, vertical dividers will automatically size to their parent height.
+ *
+ * ## Space
+ *
+ * Use this to create **space either side of the divider**. For simple cases, pass a number referring to
+ * a position on the theme's spacing scale; for example, this will put a Spacer of the smallest supported
+ * size either side of the divider:
+ *
+ * ```jsx
+ * <Divider space={1} />
+ * ```
+ *
+ * `space` prop uses `useSpacingScale` and may accept a {@link SpacingObject} or a {@link SpacingIndex} number.
+ *
+ * To **reduce the length of a divider** as well as creating space between it and its neighbours, wrap it in
+ * a `Box` component. For example, this will have the second-smallest theme-supported spacing value between
+ * the dividing line and its neighbours, and will shorten the line at either end by the same amount:
+ *
+ * ```jsx
+ * <Box space={2}><Divider /></Box>
+ * ```
+ *
+ * ## Accessibility
+ *
+ * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
+ */
+
+const Divider = /*#__PURE__*/forwardRef(({
+  variant,
+  vertical = false,
+  space,
+  tokens,
+  ...rest
+}, ref) => {
+  const {
+    color,
+    width
+  } = useThemeTokens('Divider', tokens, variant);
+  const borderStyles = vertical ? {
+    borderRightColor: color,
+    borderRightWidth: width
+  } : {
+    borderBottomColor: color,
+    borderBottomWidth: width
+  };
+  const a11y = Platform.OS === 'web' ? // There are aria attributes for dividers on web
+  {
+    'aria-orientation': vertical ? 'vertical' : 'horizontal',
+    accessibilityRole: 'separator'
+  } : // There are no such equivalent attributes for native
+  {};
+  const {
+    testID,
+    ...selectedProps
+  } = selectProps({ ...a11y,
+    ...rest
+  });
+
+  const divider = /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [styles.divider, borderStyles],
+    testID: testID,
+    ...selectedProps
+  });
+
+  if (!space) return divider;
+  const spacerProps = {
+    space,
+    direction: vertical ? 'row' : 'column'
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Spacer, { ...spacerProps,
+      testID: testID ? `${testID}-Spacer-before` : undefined
+    }), divider, /*#__PURE__*/_jsx(Spacer, { ...spacerProps,
+      testID: testID ? `${testID}-Spacer-after` : undefined
+    })]
+  });
+});
+Divider.displayName = 'Divider';
+Divider.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Divider'),
+  space: spacingProps.types.spacingValue,
+  variant: variantProp.propType,
+
+  /**
+   * By default, the divider is a horizontal line the full width of its parent.
+   * With `vertical` prop and when inside a container with { flexDirection: row }, draws a full height vertical line.
+   */
+  vertical: PropTypes.bool
+};
+const styles = StyleSheet.create({
+  divider: {
+    alignSelf: 'stretch'
+  }
+});
+export default Divider;

package/lib-module/Divider/index.js

@@ -0,0 +1,2 @@
+import Divider from './Divider';
+export default Divider;

package/lib-module/ExpandCollapse/Accordion.js

@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react';
+import ExpandCollapse from './ExpandCollapse';
+/**
+ * 'Accordion' is a shorthand for an ExpandCollapse where only one item may be open at a time
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const Accordion = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(ExpandCollapse, {
+  ref: ref,
+  ...props,
+  maxOpen: 1
+}));
+Accordion.displayName = 'Accordion';
+Accordion.propTypes = ExpandCollapse.propTypes;
+export default Accordion;

package/lib-module/ExpandCollapse/Control.js

@@ -0,0 +1,130 @@
+import React, { forwardRef } from 'react';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+function selectContainerStyles({
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderStyle,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingBottom,
+  justifyContent,
+  verticalAlign,
+  iconPosition
+}) {
+  return {
+    backgroundColor,
+    borderTopColor: borderColor,
+    borderTopWidth: borderWidth,
+    borderTopStyle: borderStyle,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    justifyContent,
+    ...verticalAlignRow(verticalAlign, iconPosition === 'right')
+  };
+} // TODO: use stack / spacer when available
+
+
+function selectIconContainerStyles({
+  iconGap,
+  iconPosition
+}) {
+  const paddingSide = iconPosition === 'right' ? 'paddingLeft' : 'paddingRight';
+  return {
+    [paddingSide]: iconGap
+  };
+}
+
+function selectIconTokens(tokens) {
+  return {
+    color: tokens.iconColor,
+    size: tokens.iconSize
+  };
+}
+
+const ExpandCollapseControl = /*#__PURE__*/forwardRef(({
+  onPress,
+  isExpanded,
+  children,
+  tokens,
+  accessibilityRole = 'button',
+  variant,
+  ...rest
+}, ref) => {
+  const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant);
+  const selectedProps = selectProps({ ...rest,
+    accessibilityRole
+  });
+  selectedProps.accessibilityState = { ...(selectedProps.accessibilityState || {}),
+    expanded: isExpanded
+  };
+
+  const getControlState = ({
+    pressed,
+    hovered,
+    focused
+  }) => ({
+    pressed,
+    hover: hovered,
+    focus: focused,
+    expanded: isExpanded
+  });
+
+  const getControlTokens = pressableState => getTokens(getControlState(pressableState));
+
+  const getPressableStyle = pressableState => selectContainerStyles(getControlTokens(pressableState));
+
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
+    ...selectedProps,
+    onPress: onPress,
+    style: getPressableStyle,
+    children: pressableState => {
+      const {
+        icon: IconComponent,
+        ...themeTokens
+      } = getControlTokens(pressableState);
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [IconComponent && /*#__PURE__*/_jsx(View, {
+          style: selectIconContainerStyles(themeTokens),
+          children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconTokens(themeTokens)
+          })
+        }), typeof children === 'function' ? children(getControlState(pressableState)) : children]
+      });
+    }
+  });
+});
+ExpandCollapseControl.displayName = 'ExpandCollapseControl';
+ExpandCollapseControl.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('ExpandCollapseControl'),
+  variant: variantProp.propType,
+
+  /**
+   * ExpandCollapseControl's children are the content within the button that opens or closes this panel. May
+   * accept a render function that recieves the control state: { pressed, hover, focus, expanded }
+   */
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+
+  /**
+   * Whether the linked ExpandCollapsePanel is opened or closed. Allows themes to set `expanded` styles.
+   */
+  isExpanded: PropTypes.bool,
+
+  /**
+   * Function called when the ExpandCollapse is pressed.
+   */
+  onPress: PropTypes.func.isRequired
+};
+export default ExpandCollapseControl;

package/lib-module/ExpandCollapse/ExpandCollapse.js

@@ -0,0 +1,94 @@
+import React, { forwardRef } from 'react';
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+function selectBorderStyles(tokens) {
+  return {
+    borderBottomWidth: tokens.borderWidth,
+    borderBottomStyle: tokens.borderStyle,
+    borderBottomColor: tokens.borderColor
+  };
+}
+/**
+ * Flexible base component for lists where some or all items are collapsible headers.
+ *
+ * Pass a render function as `children` which takes and passes `openIds` and `onToggle` props to
+ * <ExpandCollapse.Panel> children, and assign the panels explicit `panelId` props. The panels may be
+ * nested (they do not need to be direct children), and non-interactive items may be included too.
+ */
+
+
+const ExpandCollapse = /*#__PURE__*/forwardRef(({
+  children,
+  tokens,
+  variant,
+  maxOpen,
+  open,
+  initialOpen,
+  onChange,
+  ...rest
+}, ref) => {
+  const {
+    currentValues: openIds,
+    toggleOneValue: onToggle,
+    resetValues,
+    setValues,
+    unsetValues
+  } = useMultipleInputValues({
+    maxValues: maxOpen,
+    values: open,
+    initialValues: initialOpen,
+    onChange
+  });
+  const themeTokens = useThemeTokens('ExpandCollapse', tokens, variant);
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: selectBorderStyles(themeTokens),
+    ...selectProps(rest),
+    children: typeof children === 'function' ? children({
+      openIds,
+      onToggle,
+      resetValues,
+      setValues,
+      unsetValues
+    }) : children
+  });
+});
+ExpandCollapse.displayName = 'ExpandCollapse';
+ExpandCollapse.propTypes = { ...selectedSystemPropTypes,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('ExpandCollapse'),
+
+  /**
+   * ExpandCollapse usually takes a render function to which it passes an object with properties
+   * { openIds, onToggle, resetValues, setValues, unsetValues }. openIds (array of ids) and
+   * onToggle (function) will usually be passed to `<ExpandCollapse.Panel>`
+   */
+  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+
+  /**
+   * If set, enforces a specific maximum number of open items, closing already-open items when new
+   * items are opened. By default, any number of items may be open at once.
+   */
+  maxOpen: PropTypes.number,
+
+  /**
+   * If passed, the item or items that are expanded will be controlled by a parent component
+   */
+  open: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * Function called when which panels are currently open changes. Necessary if `open` is passed.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Allows items with specified ids to be open by default on first load. Should not be used with `open`.
+   */
+  initialOpen: PropTypes.arrayOf(PropTypes.string)
+};
+export default ExpandCollapse;

package/lib-module/ExpandCollapse/Panel.js

@@ -0,0 +1,158 @@
+import React, { forwardRef, useState } from 'react';
+import Animated from "react-native-web/dist/exports/Animated";
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import ExpandCollapseControl from './Control';
+import { useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, useVerticalExpandAnimation, variantProp, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]); // just void functions for now, since there are no style tokens for a panel or control at this point
+
+const selectGroupStyles = () => {};
+
+const selectContainerStyles = ({
+  contentPaddingLeft,
+  contentPaddingRight,
+  contentPaddingTop,
+  contentPaddingBottom
+}) => ({
+  paddingLeft: contentPaddingLeft,
+  paddingRight: contentPaddingRight,
+  paddingTop: contentPaddingTop,
+  paddingBottom: contentPaddingBottom
+});
+/**
+ * An item in an `ExpandCollapse` which contains collapsible `children` and a `control` that opens
+ * and closes the collapsible children when pressed.
+ *
+ * Expects `openIds` and `onToggle` props from the `ExpandCollapse` render function and a unique
+ * `panelId` that matches the ids passed to the `<ExpandCollapse>`.
+ *
+ * The panel does not need to be a direct child of the `<ExpandCollapse>` (unless this is required
+ * by the chosen accessibility props for a particular accessibility tools).
+ */
+
+
+const ExpandCollapsePanel = /*#__PURE__*/forwardRef(({
+  openIds = [],
+  panelId,
+  onToggle,
+  onPress,
+  control,
+  controlTokens,
+  children,
+  tokens,
+  variant,
+  ...rest
+}, ref) => {
+  const [containerHeight, setContainerHeight] = useState(null);
+  const isExpanded = openIds.includes(panelId);
+  const selectedProps = selectProps(rest);
+  selectedProps.accessibilityState = { ...(selectedProps.accessibilityState || {}),
+    expanded: isExpanded
+  };
+  const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
+    expanded: isExpanded
+  });
+
+  const handleControlPress = event => {
+    onToggle(panelId, event);
+    if (onPress) onPress(panelId, event);
+  };
+
+  const onContainerLayout = event => {
+    if (containerHeight === null) {
+      const {
+        layout: {
+          height = 0
+        } = {}
+      } = event.nativeEvent;
+      setContainerHeight(height);
+    }
+  };
+
+  const animatedStyles = useVerticalExpandAnimation({
+    containerHeight,
+    isExpanded,
+    tokens: themeTokens
+  }); // on web we can hide the contents until we have the container measured and avoid occasional jitter
+  // this won't work on native platforms
+
+  const overflowContainerStyles = containerHeight === null && Platform.OS === 'web' ? {
+    height: 0,
+    visibility: 'hidden'
+  } : undefined;
+  const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps;
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: selectGroupStyles(themeTokens),
+    children: [/*#__PURE__*/_jsx(ExpandCollapseControl, { ...selectedProps,
+      isExpanded: isExpanded,
+      tokens: controlTokens,
+      onPress: handleControlPress,
+      children: control
+    }), /*#__PURE__*/_jsx(View, {
+      style: overflowContainerStyles,
+      ...focusabilityProps,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        onLayout: onContainerLayout,
+        style: [staticStyles.itemsContainer, animatedStyles],
+        children: /*#__PURE__*/_jsx(View, {
+          style: selectContainerStyles(themeTokens),
+          children: children
+        })
+      })
+    })]
+  });
+});
+ExpandCollapsePanel.displayName = 'ExpandCollapsePanel';
+ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('ExpandCollapsePanel'),
+
+  /**
+   * Array of the ids of currently open groups
+   */
+  openIds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+
+  /**
+   * Unique name by which the ExpandCollapse controls this element.
+   */
+  panelId: PropTypes.string.isRequired,
+
+  /**
+   * Function to call on pressing the panel's control, which should open or close the panel.
+   * If Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent.
+   */
+  onToggle: PropTypes.func.isRequired,
+
+  /**
+   * Optional function to call on pressing the panel's control, in addition to opening or closing the panel.
+   */
+  onPress: PropTypes.func,
+
+  /**
+   * ExpandCollapsePanel's children are the content that is hidden or revealed on open or close, and may be any
+   * single React element or a render function which takes this group's isExpanded state, onToggle function and panelId
+   */
+  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+
+  /**
+   * The content inside the always-visible control element that opens and closes the ExpandCollapse when pressed.
+   */
+  control: ExpandCollapseControl.propTypes.children.isRequired,
+
+  /**
+   * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
+   */
+  controlTokens: getTokensPropType('ExpandCollapseControl')
+};
+const staticStyles = StyleSheet.create({
+  itemsContainer: {
+    overflow: 'hidden'
+  }
+});
+export default ExpandCollapsePanel;

package/lib-module/ExpandCollapse/index.js

@@ -0,0 +1,7 @@
+import ExpandCollapse from './ExpandCollapse';
+import Accordion from './Accordion';
+import Panel from './Panel';
+ExpandCollapse.Panel = Panel;
+Accordion.Panel = Panel;
+export default ExpandCollapse;
+export { Accordion };

package/lib-module/Feedback/Feedback.js

@@ -0,0 +1,144 @@
+import React, { forwardRef } from 'react';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils';
+import StackView from '../StackView';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+const selectStyles = tokens => selectTokens('Feedback', tokens);
+
+const selectTitleTextStyles = ({
+  titleFontSize,
+  ...tokens
+}) => applyTextStyles(selectTokens('Typography', { ...tokens,
+  fontSize: titleFontSize
+}));
+
+const selectContentTextStyles = ({
+  contentFontSize,
+  ...tokens
+}) => applyTextStyles(selectTokens('Typography', { ...tokens,
+  fontSize: contentFontSize
+}));
+
+const selectIconTokens = ({
+  iconSize,
+  iconColor
+}) => ({
+  size: iconSize,
+  color: iconColor
+});
+
+const selectIconContainerStyles = ({
+  iconGap
+}) => ({
+  paddingRight: iconGap
+});
+/**
+ * A feedback box commonly used with form fields.
+ *
+ * ### Standalone usage
+ * While its primary use is to facilitate feedback states for other form components such as `TextInput`,
+ * you may use it standalone.
+ *
+ * ### Complex content
+ * You may pass any React tree as the children of this component, bear in mind that a render function
+ * is better suited for styling children based on Feedback's variant.
+ *
+ * ### Using a render function
+ * When a function is passed for rendering content, it will receive the feedback text styles and
+ * variant as arguments.
+ *
+ * ### Accessibility
+ * All accessibility props set on this component will be applied to the outer container.
+ */
+
+
+const Feedback = /*#__PURE__*/forwardRef(({
+  title,
+  children,
+  id,
+  validation,
+  tokens,
+  variant,
+  ...rest
+}, ref) => {
+  const themeTokens = useThemeTokens('Feedback', tokens, { ...variant,
+    validation
+  });
+  const {
+    space
+  } = themeTokens;
+  const {
+    icon: IconComponent
+  } = themeTokens;
+  const titleTextStyles = selectTitleTextStyles(themeTokens);
+  const contentTextStyles = selectContentTextStyles(themeTokens);
+  const content = typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+    style: contentTextStyles,
+    children: children
+  }) : children;
+  const selectedProps = selectProps({
+    accessibilityRole: validation === 'error' ? 'alert' : undefined,
+    ...rest
+  });
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: selectStyles(themeTokens),
+    nativeID: id,
+    ...selectedProps,
+    children: /*#__PURE__*/_jsxs(StackView, {
+      space: space,
+      children: [title !== undefined && /*#__PURE__*/_jsxs(View, {
+        style: staticStyles.title,
+        children: [IconComponent && /*#__PURE__*/_jsx(View, {
+          style: selectIconContainerStyles(themeTokens),
+          children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconTokens(themeTokens)
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: titleTextStyles,
+          children: title
+        })]
+      }), content && typeof content === 'function' ? content({
+        textStyles: contentTextStyles,
+        variant
+      }) : content]
+    })
+  });
+});
+Feedback.displayName = 'Feedback';
+Feedback.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Emphasized summary of the feedback. If an icon is set, it is rendered next to the title.
+   */
+  title: PropTypes.string,
+
+  /**
+   * Feedback content rendered below the title. A render function `({textStyles, variant}) => {}` is supported.
+   */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
+
+  /**
+   * Use to visually mark the Feedback as valid or invalid.
+   */
+  validation: PropTypes.oneOf(['error', 'success']),
+
+  /** @ignore */
+  id: PropTypes.string,
+  tokens: getTokensPropType('Feedback'),
+  variant: variantProp.propType
+};
+export default Feedback;
+const staticStyles = StyleSheet.create({
+  title: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});

package/lib-module/Feedback/index.js

@@ -0,0 +1,2 @@
+import Feedback from './Feedback';
+export default Feedback;