EncryptedDownload

EncryptedDownload is a composite component that groups an encryption toggle button with a download action button.

It composes ButtonGroup, Button, and ButtonAction into a cohesive unit with optional Popover support for locked encryption scenarios.

Basic Usage

To implement the EncryptedDownload component, import it first:

import {
  ButtonAction,
  EncryptedDownload,
} from 'rades_react';

Then use it with a controlled encrypted state:

React.createElement(() => {
  const [encrypted, setEncrypted] = React.useState(false);

  return (
    <EncryptedDownload
      encrypted={encrypted}
      onEncryptedChange={setEncrypted}
    >
      <ButtonAction
        color="secondary"
        label="Download"
        onClick={() => Promise.resolve(true)}
      />
    </EncryptedDownload>
  );
})

Locked Encryption

Set locked to true to prevent the user from changing the encryption state. When locked is set, clicking the toggle suppresses onEncryptedChange. Provide lockedDescription to show a Popover with an explanation when the toggle is clicked.

Locked: Encrypted

Set encrypted to true and locked to true. Provide a lockedDescription to explain why encryption cannot be disabled.

React.createElement(() => {
  // DO NOT COPY the wrapping <div> into your code. It's only needed for this
  // preview to provide space for the popover with the description.
  return (
    <div style={{ display: 'grid', placeContent: 'start center', height: '12rem' }}>
      <EncryptedDownload
        encrypted
        locked
        lockedDescription="Encryption is enforced by your organization's security policy and cannot be disabled."
      >
        <ButtonAction
          color="secondary"
          label="Download"
          onClick={() => Promise.resolve(true)}
        />
      </EncryptedDownload>
    </div>
  );
})

Locked: Unencrypted

Set encrypted to false and locked to true. Provide a lockedDescription to explain why encryption is not available.

React.createElement(() => {
  // DO NOT COPY the wrapping <div> into your code. It's only needed for this
  // preview to provide space for the popover with the description.
  return (
    <div style={{ display: 'grid', placeContent: 'start center', height: '12rem' }}>
      <EncryptedDownload
        encrypted={false}
        locked
        lockedDescription="Encryption is not available on this device."
      >
        <ButtonAction
          color="secondary"
          label="Download"
          onClick={() => Promise.resolve(true)}
        />
      </EncryptedDownload>
    </div>
  );
})

Sizes

Three sizes are available: small, medium, and large.

React.createElement(() => {
  const [encryptedSmall, setEncryptedSmall] = React.useState(false);
  const [encryptedMedium, setEncryptedMedium] = React.useState(false);
  const [encryptedLarge, setEncryptedLarge] = React.useState(false);

  return (
    <>
      <EncryptedDownload
        encrypted={encryptedSmall}
        onEncryptedChange={setEncryptedSmall}
        size="small"
      >
        <ButtonAction color="secondary" label="Download" onClick={() => Promise.resolve(true)} />
      </EncryptedDownload>
      <EncryptedDownload
        encrypted={encryptedMedium}
        onEncryptedChange={setEncryptedMedium}
      >
        <ButtonAction color="secondary" label="Download" onClick={() => Promise.resolve(true)} />
      </EncryptedDownload>
      <EncryptedDownload
        encrypted={encryptedLarge}
        onEncryptedChange={setEncryptedLarge}
        size="large"
      >
        <ButtonAction color="secondary" label="Download" onClick={() => Promise.resolve(true)} />
      </EncryptedDownload>
    </>
  );
})

Disabled State

<EncryptedDownload disabled encrypted={false}>
  <ButtonAction color="secondary" label="Download" onClick={() => Promise.resolve(true)} />
</EncryptedDownload>

Accessibility

You can improve the accessibility of EncryptedDownload by providing a label that describes what is being downloaded. Use aria-labelledby to reference a visible label, or aria-label for a direct, visually hidden label.

React.createElement(() => {
  const [encrypted, setEncrypted] = React.useState(false);

  return (
    <>
      <div id="download-label">Download config.json:</div>
      <EncryptedDownload
        aria-labelledby="download-label"
        encrypted={encrypted}
        onEncryptedChange={setEncrypted}
      >
        <ButtonAction
          color="secondary"
          label="Download"
          onClick={() => Promise.resolve(true)}
        />
      </EncryptedDownload>
    </>
  );
})

Forwarding HTML Attributes

In addition to the options below in the component's API section, you can specify React synthetic events or any HTML attribute you like. All attributes that don't interfere with the API are forwarded to the root <fieldset> HTML element. This enables making the component interactive and helps to improve its accessibility.

👉 Refer to the MDN reference for the full list of supported attributes of the fieldset element.

API