index.hbs

<div class="fx-col fx-gap-px-12 padding-px-18">
  <div class="page-title-container">
    <span class="font-size-h2 font-weight-semibold">Display</span>
    <span class="font-color-gray-500">Components used to display information</span>
    <span class="font-color-gray-500 font-size-xs text-style-italic">(only useful on people who can read tho)</span>
  </div>

  <div
    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
  >
    <div class="font-size-md font-weight-semibold">
      Toast
    </div>
    <div class="fx-row fx-gap-px-24 fx-xalign-start">
      <OSS::Button @label="Info" @skin="secondary" @size="md" {{on "click" (fn this.triggerToast "info")}} />
      <OSS::Button @label="Success" @skin="success" @size="md" {{on "click" (fn this.triggerToast "success")}} />
      <OSS::Button @label="Warning" @skin="alert" @size="md" {{on "click" (fn this.triggerToast "warning")}} />
      <OSS::Button @label="Error" @skin="destructive" @size="md" {{on "click" (fn this.triggerToast "error")}} />
    </div>
  </div>

  <div
    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
  >
    <div class="font-size-md font-weight-semibold">
      Alert
    </div>
    <div class="fx-col fx-gap-px-24">
      <div class="fx-row">
        <OSS::Alert @title="Title" @subtitle="Subtitle">
          <:extra-content>
            <div class="fx-row fx-1 fx-gap-px-12">
              <OSS::Link @label="Link 1" @icon="fas fa-link" />
              <OSS::Link @label="Link 2" />
            </div>
          </:extra-content>
        </OSS::Alert>
      </div>
      <div class="fx-row fx-gap-px-12">
        <OSS::Alert @title="TitleTest" @subtitle="SubtitleTest" @plain={{false}} @closable={{true}} />
        <OSS::Alert @title="Title" @subtitle="Subtitle" />
        <OSS::Alert @skin="error" @title="Title" @subtitle="Subtitle" />
      </div>
      <div class="fx-row fx-gap-px-12">
        <OSS::Alert @skin="success" @title="Title" />
        <OSS::Alert @skin="warning" @subtitle="Subtitle" />
      </div>
    </div>
  </div>

  <div
    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
  >
    <div class="font-size-md font-weight-semibold">
      Banner
    </div>
    <div class="fx-col fx-gap-px-24">
      <div class="fx-row fx-gap-px-12">
        <OSS::Banner
          @title="Import creators inside your campaign"
          @subtitle="Choose the creators you want to import from a list, emailing, stream, Live capture or upload an existing .CSV file."
        />
        <OSS::Banner
          @icon="fas fa-box-open"
          @title="Import creators inside your campaign"
          @subtitle="Choose the creators you want to import from a list, emailing, stream, Live capture or upload an existing .CSV file."
        />
        <OSS::Bruce
          @image="https://thepressfree.com/wp-content/uploads/2021/11/Voici-pourquoi-Bruce-Banner-netait-plus-Smart-Hulk-dans-la-800x445.jpg"
          @title="Import creators inside your campaign"
          @plain={{true}}
          @subtitle="Choose the creators you want to import from a list, emailing, stream, Live capture or upload an existing .CSV file. "
        >
          <:actions>
            <OSS::Button @skin="secondary" @label="action" @icon="fas fa-box-open" @size="md" />
          </:actions>
        </OSS::Bruce>
      </div>
      <div class="fx-row fx-gap-px-12">
        <OSS::Banner
          @icon="fas fa-box-open"
          @title="Shopify"
          @selected={{true}}
          @subtitle="Identify influencers in your Shopify customers database"
        >
          <:actions>
            <OSS::RadioButton @selected={{true}} />
          </:actions>
        </OSS::Banner>
        <OSS::Banner
          @icon="fas fa-box-open"
          @title="Import creators inside your campaign"
          @subtitle="Choose the creators you want to import from a list, emailing, stream, Live capture or upload an existing .CSV file. "
        >
          <:custom-icon>
            <OSS::Badge @text="2x" @size="lg" />
          </:custom-icon>
          <:actions>
            <OSS::Button @skin="primary" @label="browse" @icon="fas fa-box-open" @size="md" />
            <OSS::Button @skin="secondary" @label="test" @icon="fas fa-box-open" @size="md" />
          </:actions>
        </OSS::Banner>
      </div>
      <div class="fx-row fx-gap-px-12">
        <OSS::Banner @icon="fas fa-biohazard" @title="BioHazard" @selected={{this.isChecked}} @size="sm">
          <:actions>
            <OSS::Checkbox @checked={{this.isChecked}} @onChange={{this.onCheck}} @size="sm" />
          </:actions>
        </OSS::Banner>
        <OSS::Banner @icon="fas fa-helicopter" @title="Helicopter" @size="sm" @disabled={{true}}>
          <:actions>
            <OSS::Icon @icon="fa-ban" />
          </:actions>
          <:secondary-actions>
            <OSS::Link @label="Configure" />
          </:secondary-actions>
        </OSS::Banner>
        <OSS::Banner @icon="fas fa-user-injured" @title="Injured" @selected={{false}} @size="sm">
          <:actions>
            <OSS::Checkbox @checked={{this.isChecked}} @onChange={{this.onCheck}} @size="sm" />
          </:actions>
        </OSS::Banner>
      </div>
    </div>
  </div>

  <div
    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
  >
    <div class="font-size-md font-weight-semibold">
      Togglable section
    </div>
    <div class="fx-row fx-gap-px-36 fx-xalign-start">
      <div class="fx-row fx-gap-px-24">
        <OSS::TogglableSection
          @title="This is a title"
          @subtitle="This is a subtitle"
          @badgeIcon="far fa-hourglass"
          @toggled={{this.toggled}}
          @onChange={{this.onToggle}}
        >
          <:contents>
            <span>This is a Contents named block</span>
          </:contents>
        </OSS::TogglableSection>
        <OSS::TogglableSection
          @title="This is a title"
          @subtitle="This is a subtitle"
          @badgeIcon="far fa-hourglass"
          @toggled={{this.toggled}}
          @onChange={{this.onToggle}}
          @size="sm"
        >
          <:contents>
            <span>This is a Contents named block</span>
          </:contents>
        </OSS::TogglableSection>
      </div>
      <div class="fx-row fx-gap-px-24">
        <OSS::TogglableSection
          @title="This is a title"
          @subtitle="This is a subtitle"
          @icon="far fa-hourglass"
          @toggled={{this.toggled}}
          @onChange={{this.onToggle}}
        />
        <OSS::TogglableSection
          @title="This is a title"
          @subtitle="This is a subtitle"
          @icon="far fa-hourglass"
          @toggled={{this.toggled}}
          @onChange={{this.onToggle}}
          @size="sm"
        />
      </div>
      <div class="fx-row fx-gap-px-24">
        <OSS::TogglableSection
          @title="This is a title"
          @subtitle="This is a subtitle"
          @toggled={{this.toggled}}
          @onChange={{this.onToggle}}
          @disabled={{true}}
        />
        <OSS::TogglableSection
          @title="This is a title"
          @subtitle="This is a subtitle"
          @toggled={{this.toggled}}
          @onChange={{this.onToggle}}
          @disabled={{true}}
          @size="sm"
        />
      </div>

    </div>
  </div>

  <div
    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
  >
    <div class="font-size-md font-weight-semibold">
      Code block
    </div>
    <div class="fx-row fx-gap-px-24 fx-xalign-start">
      <OSS::CodeBlock
        @content={{this.code4CodeBlock}}
        @scrollable={{true}}
        @copyable={{true}}
        @collapseHeight={{200}}
        @onCopyMessage="Copied to clipboard!"
      />
    </div>
  </div>

  <div
    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
  >
    <div class="font-size-md font-weight-semibold">
      Carousel
    </div>
    <div class="fx-col fx-gap-px-24 fx-xalign-center">
      <OSS::Carousel
        @buttonIcon="fas fa-robot"
        @animationStyle="shift"
        @showIndicators={{true}}
        @showControls="outside"
        @autoPlay="3000"
      >
        <:pages>
          <div class="page">
            <OSS::Banner
              @icon="fas fa-box-open"
              @title="Import creators inside your campaign"
              @subtitle="Choose the creators you want to import from a list, emailing, stream, Live capture or upload an existing .CSV file."
            />
          </div>
          <div class="page">
            <OSS::Banner
              @title="Banner without icon"
              @subtitle="Choose the creators you want to import from a list, emailing, stream, Live capture or upload an existing .CSV file."
            />
          </div>
          <div class="page">
            <OSS::Banner
              @icon="fas fa-box-open"
              @title="Import creators inside your campaign"
              @subtitle="Choose the creators you want to import from a list, emailing, stream, Live capture or upload an existing .CSV file."
            />
          </div>
          <div class="page">
            <OSS::Banner
              @title="Banner without icon"
              @subtitle="Choose the creators you want to import from a list, emailing, stream, Live capture or upload an existing .CSV file."
            />
          </div>
        </:pages>
      </OSS::Carousel>
      <OSS::Carousel @animationStyle="slide" @showIndicators={{false}} @showControls="overlay" @autoPlay="3000">
        <:pages>
          <div class="page">
            <img
              src="https://assets.enterprisestorageforum.com/uploads/2023/07/Flash-Memory-vs.-HDD-Can-Flash-Replace-Hard-Drives-768x513.jpeg"
            />
          </div>
          <div class="page">
            <img
              src="https://assets.enterprisestorageforum.com/uploads/2023/07/Flash-Memory-vs.-HDD-Can-Flash-Replace-Hard-Drives-768x513.jpeg"
            />
          </div>
          <div class="page">
            <img
              src="https://assets.enterprisestorageforum.com/uploads/2023/07/Flash-Memory-vs.-HDD-Can-Flash-Replace-Hard-Drives-768x513.jpeg"
            />
          </div>
        </:pages>
      </OSS::Carousel>
    </div>
  </div>

  <div
    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
  >
    <div class="font-size-md font-weight-semibold">
      Empty state
    </div>
    <div class="fx-row fx-gap-px-36 fx-xalign-start">
      <OSS::EmptyState @title="Title" @subtitle="Subtitle">
        <:image>
          <OSS::Illustration @src="/@upfluence/oss-components/assets/images/no-records.svg" />
        </:image>
        <:actions>
          <OSS::Button @label="Button" />
          <OSS::Button @skin="primary" @label="Button" />
        </:actions>
      </OSS::EmptyState>
      <OSS::EmptyState @title="Title" @subtitle="Subtitle" @badgeIcon="fa-thumbs-up">
        <:actions>
          <OSS::Button @label="Button" />
          <OSS::Button @skin="primary" @label="Button" />
        </:actions>
      </OSS::EmptyState>
      <OSS::EmptyState @title="Title" @subtitle="Subtitle" @size="sm">
        <:image>
          <OSS::Illustration @src="/@upfluence/oss-components/assets/images/no-records.svg" />
        </:image>
        <:actions>
          <OSS::Button @label="Button" />
          <OSS::Button @skin="primary" @label="Button" />
        </:actions>
      </OSS::EmptyState>
      <OSS::EmptyState @title="Title" @subtitle="Subtitle" @size="sm" @badgeIcon="fa-thumbs-up">
        <:actions>
          <OSS::Button @label="Button" />
          <OSS::Button @skin="primary" @label="Button" />
        </:actions>
      </OSS::EmptyState>
    </div>
  </div>

</div>