@swrve/core/src/icon-button/icon-button.stories.js

Core set of Swrve UI Components

import React from 'react'

import { IconButton, SquareIconButton } from './index'

const styles = {
  margin: '20px 50px 40px'
}

const WrapperDecorator = Story => (
  <div style={styles}>
    <Story />
  </div>
)

export default {
  title: 'Core/IconButton',
  decorators: [WrapperDecorator],
  component: IconButton
}

export const AConfigurableIconButton = args => (
  <div>
    <div className="mb-8">
      <h4 className="mb-4">Small:</h4>
      <IconButton
        onClick={() => null}
        label="I am a label!"
        iconName="reports"
        size="small"
        {...args}
      />
    </div>
    <div className="mb-8">
      <h4 className="mb-4">Medium:</h4>
      <IconButton onClick={() => null} label="I am a label!" iconName="reports" size="medium" />
    </div>
    <div>
      <h4 className="mb-4">Large:</h4>
      <IconButton onClick={() => null} label="I am a label!" iconName="reports" size="large" />
    </div>
  </div>
)

AConfigurableIconButton.storyName = 'A configurable icon-button.'
AConfigurableIconButton.parameters = {
  docs: {
    description: {
      component: `An IconButton component which renders a button designed to display an icon
      alongside some label text.\n\nThe component's size, appearance, icon, label-text and label-visibility
      can be configured with component-specific props.\n\nIt can accept all common props associated with a button element, in
      addition to the component-specific props.`
    }
  }
}

export const TheSizeOfTheComponentCanBeSetViaProps = args => (
  <IconButton
    onClick={() => null}
    label="I am a label!"
    iconName="reports"
    size="large"
    {...args}
  />
)

TheSizeOfTheComponentCanBeSetViaProps.storyName = 'The size of the component can be set via props.'
TheSizeOfTheComponentCanBeSetViaProps.parameters = {
  docs: {
    description: {
      story: `The "size" prop determines the size and structure of the IconButton It can have a value of "small" or "large".`
    }
  }
}

export const TheComponentsIconCanBeSetViaProps = args => (
  <div>
    <IconButton
      onClick={() => null}
      label="I am a label!"
      iconName="reports"
      size="small"
      {...args}
    />
    <hr />
    <IconButton
      onClick={() => null}
      label="I am a label!"
      iconName="reports"
      size="large"
      {...args}
    />
  </div>
)

TheComponentsIconCanBeSetViaProps.storyName = "The component's icon can be set via props."
TheComponentsIconCanBeSetViaProps.parameters = {
  docs: {
    description: {
      story: `The "iconName" prop determines which icon will be rendered by the
      component. Some valid icon names: "reports", "iam", "manage", "push".`
    }
  }
}

export const TheComponentsLabelCanBeSetViaProps = args => (
  <div>
    <IconButton
      onClick={() => null}
      label="I am a label!"
      iconName="reports"
      size="small"
      {...args}
    />
    <hr />
    <IconButton
      onClick={() => null}
      label="I am a label!"
      iconName="reports"
      size="large"
      {...args}
    />
  </div>
)

TheComponentsLabelCanBeSetViaProps.storyName = "The component's label can be set via props."
TheComponentsLabelCanBeSetViaProps.parameters = {
  docs: {
    description: {
      story: `The "label" prop determines which text which will be rendered by the
      component alongside the icon.`
    }
  }
}

export const TheVisiblityOfTheComponentsLabelCanBeSetViaProps = args => (
  <div>
    <IconButton
      onClick={() => null}
      label="I am a label!"
      labelIsVisible={false}
      iconName="reports"
      size="small"
      {...args}
    />
    <hr />
    <IconButton
      onClick={() => null}
      label="I am a label!"
      labelIsVisible={false}
      iconName="reports"
      size="large"
      {...args}
    />
  </div>
)

TheVisiblityOfTheComponentsLabelCanBeSetViaProps.storyName =
  "The visiblity of the component's label can be set via props."
TheVisiblityOfTheComponentsLabelCanBeSetViaProps.parameters = {
  docs: {
    description: {
      story: `The "labelIsVisible" prop determines whether the label-text will be
      rendered by the component alongside the icon.`
    }
  }
}

export const TheComponentCanBeToggledIntoASelectedStateViaProps = args => (
  <div>
    <IconButton
      onClick={() => null}
      label="I am a label!"
      iconName="reports"
      size="small"
      selected={true}
      {...args}
    />
    <hr />
    <IconButton
      onClick={() => null}
      label="I am a label!"
      iconName="reports"
      size="large"
      selected={true}
      {...args}
    />
  </div>
)

TheComponentCanBeToggledIntoASelectedStateViaProps.storyName =
  'The component can be toggled into a "selected" state via props.'
TheComponentCanBeToggledIntoASelectedStateViaProps.parameters = {
  docs: {
    description: {
      story: `The "selected" prop can have a value of true or false, and determines
      aspects of the IconButton's appearance when true, indicating a selected
      state.`
    }
  }
}

export const TheComponentIsCapableOfReceivingAWideRangeOfGenericProps = args => (
  <div>
    <IconButton
      onClick={() => null}
      type="button"
      disabled={false}
      iconName="reports"
      label="I am a label!"
      size="small"
      {...args}
    />
    <hr />
    <IconButton
      onClick={() => null}
      type="button"
      disabled={false}
      iconName="reports"
      label="I am a label!"
      size="large"
      {...args}
    />
  </div>
)

TheComponentIsCapableOfReceivingAWideRangeOfGenericProps.storyName =
  'The component is capable of receiving a wide range of generic props.'
TheComponentIsCapableOfReceivingAWideRangeOfGenericProps.parameters = {
  docs: {
    description: {
      story: `Any props not explicitly defined within the API are passed through and
      spread over the button element rendered by the IconButton component. This
      allows for the use of common button-related props, like "type", or
      "disabled".`
    }
  }
}

export const ASquareIconButtonCleanWithASimpleHoverStateDefaultColours = args => (
  <div className="p-8">
    <SquareIconButton iconName="reports" disabled={false} selected={false} {...args} />
  </div>
)

ASquareIconButtonCleanWithASimpleHoverStateDefaultColours.storyName =
  'A square icon button - clean with a simple hover state default colours'
ASquareIconButtonCleanWithASimpleHoverStateDefaultColours.parameters = {
  docs: {
    description: {
      story: `This is a square icon button, with default colours. 
      The background is only visible in its hover state`
    }
  }
}

export const ASquareIconButtonWithIconAndBackgroundColoursSetByProps = args => (
  <div className="p-8">
    <SquareIconButton
      iconName="edit"
      bgColor="bg-porcelain"
      iconColor="text-jungleGrey"
      disabled={false}
      selected={false}
      {...args}
    />
  </div>
)

ASquareIconButtonWithIconAndBackgroundColoursSetByProps.storyName =
  'A square icon button - with icon and background colours set by props'
ASquareIconButtonWithIconAndBackgroundColoursSetByProps.parameters = {
  docs: {
    description: {
      story: `This is a square icon button, the background and icon colours can be set by props`
    }
  }
}