datocms-react-ui 0.3.24 → 0.3.28

package/src/Dropdown/styles.module.css

@@ -0,0 +1,331 @@
+.Dropdown {
+  position: relative;
+}
+
+.Dropdown__spacer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.Dropdown__menu__search {
+  padding: 7px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.Dropdown__menu__search__input {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid var(--border-color);
+  appearance: none;
+  background-image: none;
+  transition: border 0.2s var(--material-ease);
+  resize: none;
+  font-family: inherit;
+  padding: 8px;
+  border-radius: 3px;
+  font-size: 0.9em;
+
+  &::placeholder {
+    color: var(--placeholder-body-color);
+  }
+
+  &:hover {
+    border-color: var(--darker-border-color);
+  }
+
+  &:focus {
+    outline: 0;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px var(--semi-transparent-accent-color);
+  }
+}
+
+.Dropdown__menu-container {
+  position: fixed;
+  visibility: hidden;
+}
+
+.Dropdown__menu {
+  min-width: 200px;
+  background-color: white;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  margin-bottom: var(--spacing-xl);
+  padding: 1px 0;
+  text-align: initial;
+  margin-top: 10px;
+}
+
+.Dropdown__menu__inner {
+  margin: 7px 0;
+}
+
+.Dropdown__menu--fullscreen {
+  position: fixed;
+  top: var(--spacing-xl);
+  right: var(--spacing-l);
+  bottom: 1em;
+  margin-bottom: var(--spacing-xxl);
+  left: var(--spacing-l);
+  z-index: 2;
+  pointer-events: auto;
+  animation: FullscreenDropdown__appear 0.2s ease-out forwards;
+}
+@keyframes FullscreenDropdown__appear {
+  0% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.Dropdown__menu__close {
+  position: fixed;
+  text-align: center;
+  top: auto;
+  right: var(--spacing-l);
+  bottom: var(--spacing-l);
+  left: var(--spacing-l);
+  z-index: 2;
+  margin-bottom: 0;
+  animation: FullscreenDropdown__appear 0.25s ease-out forwards;
+}
+
+.Dropdown__menu__group__title {
+  padding: 5px 15px 3px;
+  color: var(--light-body-color);
+  background-color: var(--light-bg-color);
+  text-transform: uppercase;
+  font-size: var(--font-size-xs);
+}
+
+.Dropdown__menu__group__content {
+  margin: 8px 0;
+}
+
+.Dropdown__menu__text {
+  text-align: left;
+  padding: 4px 15px;
+  color: var(--light-body-color);
+  position: relative;
+  display: block;
+  line-height: 1.2;
+}
+
+.Dropdown__menu__option {
+  text-align: left;
+  padding: 4px 15px;
+  color: var(--base-body-color);
+  position: relative;
+  text-decoration: none;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+
+  &:hover,
+  &:focus {
+    background-color: var(--light-bg-color);
+  }
+
+  & > a {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+  }
+}
+
+.Dropdown__menu__option--is-selected {
+  background-color: var(--light-bg-color);
+}
+
+.Dropdown__menu__option--is-disabled {
+  opacity: 0.5;
+
+  .Dropdown__menu__option__content {
+    cursor: not-allowed;
+  }
+}
+
+.Dropdown__menu__option--is-dangerous {
+  color: var(--alert-color);
+
+  svg {
+    fill: var(--alert-color);
+  }
+
+  &:hover,
+  &:focus {
+    background-color: var(--alert-color);
+    color: white;
+
+    svg {
+      fill: white;
+    }
+  }
+}
+
+.Dropdown__menu__option--is-active {
+  font-weight: 500;
+
+  &:hover,
+  &:focus {
+    background-color: none;
+  }
+}
+
+.Dropdown__menu__option--is-valid {
+  padding-left: 35px;
+}
+
+.Dropdown__menu__option--is-invalid {
+  padding-left: 35px;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 15px;
+    font-size: 12px;
+    border-radius: 4px;
+    height: 8px;
+    width: 8px;
+    background-color: var(--alert-color);
+  }
+}
+
+.Dropdown__menu__option__content {
+  flex: 1;
+  text-align: left;
+  font-family: inherit;
+  cursor: pointer;
+  line-height: inherit;
+  background-color: transparent;
+  color: inherit;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  box-sizing: border-box;
+  border: 0;
+  padding: 0;
+  font-size: inherit;
+  font-weight: inherit;
+
+  > svg {
+    font-size: 13px;
+    padding-right: 8px;
+    display: inline-block;
+    vertical-align: middle;
+    color: var(--light-body-color);
+    fill: var(--light-body-color);
+  }
+}
+
+.Dropdown__menu__option__icons {
+  padding-left: 15px;
+  display: flex;
+  align-items: center;
+}
+
+.Dropdown__menu__option__icon {
+  font-family: inherit;
+  cursor: pointer;
+  line-height: inherit;
+  background-color: transparent;
+  color: var(--base-body-color);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  box-sizing: border-box;
+  border: 0;
+  padding: 0;
+  width: 100%;
+  font-size: inherit;
+  width: auto;
+  opacity: 0;
+  line-height: 10px;
+  color: var(--light-body-color);
+  padding: 3px;
+  font-size: 13px;
+  position: relative;
+  top: -1px;
+  display: inline-block;
+  transition: transform 0.1s ease-in-out;
+
+  .Dropdown__menu__option:hover & {
+    opacity: 1;
+  }
+  .Dropdown__menu__option:focus & {
+    opacity: 1;
+  }
+
+  &:hover,
+  &:focus {
+    transform: scale(1.2);
+  }
+
+  svg {
+    fill: var(--light-body-color);
+  }
+}
+
+.Dropdown__menu__option__icon--delete {
+  color: var(--alert-color);
+  svg {
+    fill: var(--alert-color);
+  }
+}
+
+.Dropdown__menu__separator {
+  margin: 8px 0;
+  height: 1px;
+  background-color: var(--border-color);
+}
+
+.Dropdown__menu {
+  overflow-y: auto;
+}
+
+.Dropdown__menu__mobile-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10002;
+  overflow: auto;
+
+  .Dropdown__menu {
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+.Modal__backdrop {
+  background: linear-gradient(
+    to bottom,
+    rgba(48, 48, 47, 0.9),
+    rgba(48, 48, 47, 0.7)
+  );
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  animation: Modal__appear 0.2s var(--material-ease);
+  animation-fill-mode: both;
+  pointer-events: none;
+}
+
+@keyframes Modal__appear {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

package/src/Dropdown/styles.module.css.json

@@ -0,0 +1 @@
+{"Dropdown":"_Dropdown_1hebg_1","Dropdown__spacer":"_Dropdown__spacer_1hebg_5","Dropdown__menu__search":"_Dropdown__menu__search_1hebg_11","Dropdown__menu__search__input":"_Dropdown__menu__search__input_1hebg_16","Dropdown__menu-container":"_Dropdown__menu-container_1hebg_45","Dropdown__menu":"_Dropdown__menu_1hebg_11","Dropdown__menu__inner":"_Dropdown__menu__inner_1hebg_61","Dropdown__menu--fullscreen":"_Dropdown__menu--fullscreen_1hebg_65","FullscreenDropdown__appear":"_FullscreenDropdown__appear_1hebg_1","Dropdown__menu__close":"_Dropdown__menu__close_1hebg_87","Dropdown__menu__group__title":"_Dropdown__menu__group__title_1hebg_99","Dropdown__menu__group__content":"_Dropdown__menu__group__content_1hebg_107","Dropdown__menu__text":"_Dropdown__menu__text_1hebg_111","Dropdown__menu__option":"_Dropdown__menu__option_1hebg_120","Dropdown__menu__option--is-selected":"_Dropdown__menu__option--is-selected_1hebg_142","Dropdown__menu__option--is-disabled":"_Dropdown__menu__option--is-disabled_1hebg_146","Dropdown__menu__option__content":"_Dropdown__menu__option__content_1hebg_149","Dropdown__menu__option--is-dangerous":"_Dropdown__menu__option--is-dangerous_1hebg_154","Dropdown__menu__option--is-active":"_Dropdown__menu__option--is-active_1hebg_172","Dropdown__menu__option--is-valid":"_Dropdown__menu__option--is-valid_1hebg_181","Dropdown__menu__option--is-invalid":"_Dropdown__menu__option--is-invalid_1hebg_185","Dropdown__menu__option__icons":"_Dropdown__menu__option__icons_1hebg_228","Dropdown__menu__option__icon":"_Dropdown__menu__option__icon_1hebg_228","Dropdown__menu__option__icon--delete":"_Dropdown__menu__option__icon--delete_1hebg_275","Dropdown__menu__separator":"_Dropdown__menu__separator_1hebg_282","Dropdown__menu__mobile-container":"_Dropdown__menu__mobile-container_1hebg_292","Modal__backdrop":"_Modal__backdrop_1hebg_306","Modal__appear":"_Modal__appear_1hebg_1"}

package/src/FieldError/index.tsx

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+import s from './styles.module.css.json';
+
+type FieldErrorProps = {
+  children: ReactNode;
+};
+
+export function FieldError({ children }: FieldErrorProps): JSX.Element {
+  return <div className={s.fieldError}>{children}</div>;
+}

package/src/FieldError/styles.module.css

@@ -0,0 +1,6 @@
+.fieldError {
+  color: var(--alert-color);
+  line-height: 1.2;
+  font-size: var(--font-size-xs);
+  margin-top: var(--spacing-s);
+}

package/src/FieldError/styles.module.css.json

@@ -0,0 +1 @@
+{"fieldError":"_fieldError_qi0xk_1"}

package/src/FieldGroup/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './styles.module.css.json';
+
+export interface FieldGroupProps {
+  className?: string;
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+export function FieldGroup({
+  children,
+  className,
+  ...otherProps
+}: FieldGroupProps): JSX.Element {
+  const classNames = cn(styles.FieldGroup, className);
+
+  return (
+    <div {...otherProps} className={classNames}>
+      {React.Children.map(children, (child) => (
+        <div className={styles.FieldGroup__item}>{child}</div>
+      ))}
+    </div>
+  );
+}

package/src/FieldGroup/styles.module.css

@@ -0,0 +1,12 @@
+.FieldGroup {
+  display: block;
+}
+
+.FieldGroup__item {
+  display: block;
+  margin-bottom: var(--spacing-l);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}

package/src/FieldGroup/styles.module.css.json

@@ -0,0 +1 @@
+{"FieldGroup":"_FieldGroup_uz9ju_1","FieldGroup__item":"_FieldGroup__item_uz9ju_5"}

package/src/FieldHint/index.tsx

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+import s from './styles.module.css.json';
+
+type FieldHintProps = {
+  children: ReactNode;
+};
+
+export function FieldHint({ children }: FieldHintProps): JSX.Element {
+  return <div className={s.fieldHint}>{children}</div>;
+}

package/src/FieldHint/styles.module.css

@@ -0,0 +1,6 @@
+.fieldHint {
+  color: var(--light-body-color);
+  line-height: 1.2;
+  font-size: var(--font-size-xs);
+  margin-top: var(--spacing-s);
+}

package/src/FieldHint/styles.module.css.json

@@ -0,0 +1 @@
+{"fieldHint":"_fieldHint_1dor2_1"}

package/src/Form/index.tsx

@@ -0,0 +1,145 @@
+import React, {
+  Children,
+  useCallback,
+  CSSProperties,
+  FormEventHandler,
+  FormEvent,
+  ReactNode,
+} from 'react';
+import cn from 'classnames';
+import styles from './styles.module.css.json';
+
+export interface FormProps {
+  onSubmit?: FormEventHandler;
+  spacing?: 'condensed' | 'default';
+  style?: CSSProperties;
+  className?: string;
+  children: ReactNode;
+}
+
+/**
+ * @example Full example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Form onSubmit={() => console.log('onSubmit')}>
+ *     <FieldGroup>
+ *       <TextField
+ *         required
+ *         name="name"
+ *         id="name"
+ *         label="Name"
+ *         value="Mark Smith"
+ *         placeholder="Enter full name"
+ *         hint="Provide a full name"
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <TextField
+ *         required
+ *         name="email"
+ *         id="email"
+ *         label="Email"
+ *         type="email"
+ *         value=""
+ *         placeholder="your@email.com"
+ *         error="Please enter an email!"
+ *         hint="Enter email address"
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <TextField
+ *         required
+ *         name="apiToken"
+ *         id="apiToken"
+ *         label="API Token"
+ *         value="XXXYYY123"
+ *         hint="Enter a valid API token"
+ *         textInputProps={{ monospaced: true }}
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <SelectField
+ *         name="option"
+ *         id="option"
+ *         label="Option"
+ *         hint="Select one of the options"
+ *         value={{ label: 'Option 1', value: 'option1' }}
+ *         selectInputProps={{
+ *           options: [
+ *             { label: 'Option 1', value: 'option1' },
+ *             { label: 'Option 2', value: 'option2' },
+ *             { label: 'Option 3', value: 'option3' },
+ *           ],
+ *         }}
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <SelectField
+ *         name="multipleOption"
+ *         id="multipleOption"
+ *         label="Multiple options"
+ *         hint="Select one of the options"
+ *         value={[
+ *           { label: 'Option 1', value: 'option1' },
+ *           { label: 'Option 2', value: 'option2' },
+ *         ]}
+ *         selectInputProps={{
+ *           isMulti: true,
+ *           options: [
+ *             { label: 'Option 1', value: 'option1' },
+ *             { label: 'Option 2', value: 'option2' },
+ *             { label: 'Option 3', value: 'option3' },
+ *           ],
+ *         }}
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <SwitchField
+ *         name="debugMode"
+ *         id="debugMode"
+ *         label="Debug mode active?"
+ *         hint="Logs messages to console"
+ *         value={true}
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *     </FieldGroup>
+ *     <FieldGroup>
+ *       <Button fullWidth buttonType="primary">
+ *         Submit
+ *       </Button>
+ *     </FieldGroup>
+ *   </Form>
+ * </Canvas>;
+ * ```
+ */
+export const Form = ({
+  children,
+  className,
+  onSubmit,
+  spacing = 'default',
+  ...otherProps
+}: FormProps): JSX.Element => {
+  const classNames = cn(styles.Form, className);
+
+  const formItemClassNames = cn(
+    styles.Form__item,
+    styles[`Form__item--${spacing}`],
+  );
+
+  const handleSubmit = useCallback(
+    (event: FormEvent) => {
+      event.preventDefault();
+      if (onSubmit) {
+        onSubmit(event);
+      }
+    },
+    [onSubmit],
+  );
+
+  return (
+    <form className={classNames} onSubmit={handleSubmit} {...otherProps}>
+      {Children.map(children, (child) => {
+        if (child) {
+          return <div className={formItemClassNames}>{child}</div>;
+        }
+        return null;
+      })}
+    </form>
+  );
+};

package/src/Form/styles.module.css

@@ -0,0 +1,19 @@
+.Form {
+  display: block;
+}
+
+.Form__item {
+  display: block;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.Form__item--default {
+  margin-bottom: var(--spacing-l);
+}
+
+.Form__item--condensed {
+  margin-bottom: var(--spacing-m);
+}

package/src/Form/styles.module.css.json

@@ -0,0 +1 @@
+{"Form":"_Form_5qspp_1","Form__item":"_Form__item_5qspp_5","Form__item--default":"_Form__item--default_5qspp_13","Form__item--condensed":"_Form__item--condensed_5qspp_17"}

package/src/FormLabel/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import cn from 'classnames';
+import s from './styles.module.css.json';
+
+export interface FormLabelProps {
+  htmlFor: string;
+  children: React.ReactNode;
+  className?: string;
+  required?: boolean;
+  error?: boolean;
+  code?: React.ReactNode;
+}
+
+export const FormLabel = ({
+  children,
+  className,
+  htmlFor,
+  code,
+  required = false,
+  error = false,
+  ...otherProps
+}: FormLabelProps): JSX.Element => {
+  const classNames = cn(s.formLabel, className, {
+    [s['formLabel--error']]: error,
+  });
+
+  return (
+    <label className={classNames} htmlFor={htmlFor} {...otherProps}>
+      <span className={s.formLabel__label}>
+        {children}
+        {required && <span className={s.formLabel__required}>*</span>}
+      </span>
+      {code && <span className={s.formLabel__code}>{code}</span>}
+    </label>
+  );
+};

package/src/FormLabel/styles.module.css

@@ -0,0 +1,31 @@
+.formLabel {
+  display: flex;
+  color: var(--light-body-color);
+  margin-bottom: var(--spacing-s);
+  align-items: center;
+
+  &:hover {
+    .formLabel__code {
+      opacity: 1;
+    }
+  }
+}
+
+.formLabel--error {
+  color: var(--alert-color);
+}
+
+.formLabel__label {
+  flex: 1;
+}
+
+.formLabel__code {
+  font-family: var(--monospaced-font-family);
+  font-size: 0.95em;
+  position: absolute;
+  opacity: 0;
+  transition: opacity 0.2s var(--material-ease);
+}
+
+.formLabel__required {
+}

package/src/FormLabel/styles.module.css.json

@@ -0,0 +1 @@
+{"formLabel":"_formLabel_tcjrv_1","formLabel__code":"_formLabel__code_tcjrv_8","formLabel--error":"_formLabel--error_tcjrv_14","formLabel__label":"_formLabel__label_tcjrv_18","formLabel__required":"_formLabel__required_tcjrv_30"}